Propriété CSS list-style-position

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>

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>

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.

Support de Navigateurs

1.0+ 1.0+ 1.0+ 3.5+


Trouvez-vous cela utile?

Articles Associées