Propriété CSS list-style-position

❮ Précédent Suivant ❯

La propriété list-style-position spécifie si le marqueur pour un élémnt de liste doit apparaître en dedans ou en dehors de la boîte des éléments de liste.

La propriété list-style-position est appliquée aux éléments de liste et les éléments pour lesquels display est défini à "list-item". Par défaut, cela comprend les éléments <li>. Cela peut egalement être défini sur les éléments parents: <ol> ou <ul>.

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

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .inside {
      list-style-position: inside;
      }
      li {
      border: 1px solid #666;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété list-style-position</h2>
    <p>Ici list-style est positionné "inside".</p>
    <ul class="inside">
      <li>Élément de liste 1</li>
      <li>Élément de liste 2</li>
      <li>Élément de liste 3</li>
    </ul>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, les éléments de liste sont positionnés dans la boîte.

Voici un autre exemple, où les éléments de la liste sont placés en dehors:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .outside {
      list-style-position: outside;
      }
      li {
      border: 1px solid #666;
      padding: 5px;
      margin-bottom: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété list-style-position</h2>
    <p>Ici list-style est positionné "outside".</p>
    <ul class="outside">
      <li>Éléments de liste 1</li>
      <li>Éléments de liste 2</li>
      <li>Éléments de liste 3</li>
    </ul>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
outside	La boîte du marqueur est en dehors de la boîte noire principale. C'est la valeur initiale de cette propriété
inside	La boîte du marqueur est la première boîte en ligne dans la boîte noire principale.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.