list-style-position
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 |
---|
CSS Lists and Counters Module Level 3 # list-style-position-property |
Compatibilité des navigateurs
BCD tables only load in the browser