Propriété CSS list-style-position

La propriété list-style-position spécifie si le marqueur d'un élément de liste doit être à l'intérieur ou à l'extérieur de la boîte de l'élément de liste.

La propriété list-style-position s'applique aux éléments de liste et aux éléments dont la display est définie sur "list-item". Par défaut, cela inclut les éléments <li>. Elle peut également être définie sur les éléments parents : <ol> ou <ul>.

Valeur initiale	outside
S'applique à	Éléments de liste.
Héritée	Oui.
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.listStylePosition = "inside";

Syntaxe

css

list-style-position: inside | outside | initial | inherit;

Exemple de la propriété list-style-position avec la valeur « inside » :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inside {
        list-style-position: inside;
      }
      li {
        border: 1px solid #666;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "inside".</p>
    <ul class="inside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Try it Yourself »

Résultat

CSS list-style-position Property

Dans l'exemple ci-dessus, les éléments de liste sont positionnés à l'intérieur de la boîte.

Exemple de la propriété list-style-position avec la valeur « outside » :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .outside {
        list-style-position: outside;
      }
      li {
        border: 1px solid #666;
        padding: 5px;
        margin-bottom: 15px;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "outside".</p>
    <ul class="outside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Essayer
outside	Place la boîte du marqueur à l'extérieur de la boîte de bloc principale. C'est la valeur par défaut de cette propriété.	Essayer »
inside	Définit la boîte du marqueur comme première boîte en ligne dans la boîte de bloc principale.	Essayer »
initial	Fait utiliser à la propriété sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Pratique

Que spécifie la propriété 'list-style-position' en CSS ?

La position du marqueur de liste.Le style du marqueur de liste.La couleur du marqueur de liste.Si le marqueur de liste doit apparaître à l'intérieur ou à l'extérieur du flux de contenu.

Propriété CSS list-style-position ​

Syntaxe ​

Exemple de la propriété list-style-position avec la valeur « inside » : ​

Résultat ​

Exemple de la propriété list-style-position avec la valeur « outside » : ​

Valeurs ​