list-style-position
La propriété list-style-position permet de définir la position du marqueur (cf. ::marker) de liste par rapport à la boîte principale.
Exemple interactif
Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie list-style.
Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels display vaut 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>).
Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec list-style-position: inside. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir le bug 36854 de Firefox pour plus d'informations.
Syntaxe
/* Valeurs avec un mot-clé */
list-style-position: inside;
list-style-position: outside;
/* Valeurs globales */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: unset;
La propriété list-style-position est définie avec l'un des mots-clés suivants.
Valeurs
Définition formelle
| Valeur initiale | outside |
|---|---|
| Applicabilité | éléments de liste |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
list-style-position =
inside |
outside
Exemples
Définition de la position des éléments d'une liste
HTML
<ul class="un">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="deux">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="trois">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>
CSS
.un {
list-style-position: inside;
list-style-type: square;
}
.deux {
list-style-position: outside;
list-style-type: circle;
}
.trois {
list-style-position: inside;
list-style-image: url("starsolid.gif");
}
Résultat
Spécifications
| Specification |
|---|
| Unknown specification # list-style-position-property |
Compatibilité des navigateurs
BCD tables only load in the browser