La propriété list-style-position permet de définir la position du marqueur de liste par rapport à la bôite principale.
/* Valeurs avec mot-clé */ list-style-position: inside; list-style-position: outside; /* Valeurs globales */ list-style-position: inherit; list-style-position: initial; list-style-position: unset;
Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie list-style.
| Valeur initiale | outside |
|---|---|
| Applicabilité | éléments de liste |
| Héritée | oui |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels display: list-item;}}). Par défaut, cela inclut les éléments <li>. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à <ol> ou à <ul>).
Syntaxe
Valeurs
outside- La boîte du marqueur est en dehors de la boîte principale.
inside- La boîte du marqueur est la première boîte en ligne (inline) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur.
Syntaxe formelle
inside | outside
Exemples
CSS
.one {
list-style:square inside;
}
.two {
list-style-position: outside;
list-style-type: circle;
}
.three {
list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
list-style-position: inherit;
}
HTML
<ul class="one"> Liste 1 <li>Élément 1-1</li> <li>Élément 1-2</li> <li>Élément 1-3</li> <li>Élément 1-4</li> </ul> <ul class="two"> Liste 2 <li>Élément 2-1</li> <li>Élément 2-2</li> <li>Élément 2-3</li> <li>Élément 2-4</li> </ul> <ul class="three"> Liste 3 <li>Élément 3-1</li> <li>Élément 3-2</li> <li>Élément 3-3</li> <li>Élément 3-4</li> </ul>
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Lists and Counters Module Level 3 La définition de 'list-style-position' dans cette spécification. |
Version de travail | Aucun changement. |
| CSS Level 2 (Revision 1) La définition de 'list-style-position' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Support simple | 1.0 | 1.0 (1.0) | (Oui) | 4.0 | 3.5 | 1.0 (85) |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | Edge | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | ? | ? | (Oui) | ? | ? | ? |
Il existe une différence entre les comportements des différents moteurs lorsqu'un élément de bloc est placé en premier dans un élément de liste lorsqu'on a list-style-position:inside. Chrome et Safari placent cet élément sur la même ligne que la boîte du marqueur. Firefox, Internet Explorer et Opera le placent sur la ligne suivante. Pour plus d'informations, voir le bug bug 36854et cet exemple.