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

/* 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;

Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie list-style.

Valeur initialeoutside
Applicabilitééléments de liste
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Note : 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>).

Syntaxe

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 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.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple112143.51
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple Oui Oui124 ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, fscholz, FredB, Mgjbot, Fredchat, Kyodev, VincentN
 Dernière mise à jour par : SphinxKnight,