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.

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
Valeur calculée	comme spécifié
Type d'animation	discrète

Compatibilité des navigateurs

BCD tables only load in the browser