list-style-position

Aller à :
  1. Syntaxe
  2. Exemples
  3. Spécifications
  4. Compatibilité des navigateurs
  5. Voir aussi

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

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple112143.51
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui124 ? ? Oui

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,