La propriété list-style-position permet de définir la position du marqueur (cf. ::marker de liste par rapport à la boîte principale.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie list-style.
Notes :
- 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>). - 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 bug 36854 pour plus d'informations.
Syntaxe
/* 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;
La propriété list-style-position est définie avec l'un des mots-clés suivants.
Valeurs
inside- La boîte du marqueur (
::marker) 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. outside- La boîte du marqueur (
::marker) est en dehors de la boîte principale.
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 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. |
| 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 |
Compatibilité des navigateurs
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Update compatibility data on GitHub
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
list-style-position | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 1 | IE Support complet 4 | Opera Support complet 3.5 | Safari Support complet 1 | WebView Android Support complet ≤37 | Chrome Android Support complet 18 | Firefox Android Support complet 4 | Opera Android ? | Safari iOS Support complet 1 | Samsung Internet Android Support complet 1.0 |
Légende
- Support complet
- Support complet
- Compatibilité inconnue
- Compatibilité inconnue