attribut LIST-STYLE-POSITION

Rôle

L’attribut list-style-position permet de déterminer si le marqueur doit être à l’intérieur (partie intégrante) ou à l’extérieur (retrait négatif) du contenu de l’élément du bloc UL ou OL.

Version : CSS1

Héritage (inherit) : oui

Propriété Javascript : element.style.listStylePosition

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

.listea li{
  list-style-position: inside;
  background-color: silver;
}
.listeb li{
  list-style-position: outside;
  background-color: pink;
}

– Le code HTML

<ul class="listea">
  <li>liste 1</li>
  <li>liste 2</li>
  <li>liste 3</li>
  <li>liste 4</li>
</ul>
<ul class="listeb">
  <li>liste 1</li>
  <li>liste 2</li>
  <li>liste 3</li>
  <li>liste 4</li>
</ul>

Résultat

Compatibilité

L’attribut list-style-position est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut list-style-position sont :

inside

Le marqueur fait partie intégrante du contenu de l’élément de liste
Syntaxe :
list-style-position: inside

See the Pen list style position by salsacobo (@salsacobo) on CodePen.

outside

Le marqueur est en retrait négatif par rapport au contenu de l’élément de liste
Syntaxe :
list-style-position: outside

See the Pen list style position by salsacobo (@salsacobo) on CodePen.

initial

La position est définie à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité, par exemple un élément de liste peut ignorer la position imposée par une feuille de style qui le cible.
Syntaxe :
list-style-position : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
list-style-position : inherit

A voir aussi

list-style– list-style-position– list-style-type– list-style-image