list-style-position

La propriété list-style-position permet de définir la position du marqueur de liste par rapport à la bôite principale.

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é
Animable	non
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

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;

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.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	1.0	1.0 (1.0)	4.0	3.5	1.0 (85)

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	?	?	?	?	?

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.