Une liste ordonnée peut-elle produire un résultat qui ressemble à 1.1, 1.2, 1.3 (au lieu de 1, 2, 3, ...) avec css ?

Question

Une liste ordonnée peut-elle produire des résultats ressemblant à 1.1, 1.2, 1.3 (au lieu de 1, 2, 3, ...) avec CSS ? Jusqu'à présent, l'utilisation de list-style-type:decimal n'a produit que 1, 2, 3, pas 1.1, 1.2., 1.3.

Answer 1

Vous pouvez utiliser compteurs pour le faire :

La feuille de style suivante numérote les éléments de listes imbriquées comme "1", "1.1", "1.1.1", etc.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Exemple

ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

Voir Compteurs imbriqués et portée pour plus d'informations.

Answer 2

Aucune des solutions proposées sur cette page ne fonctionne correctement et universellement pour tous les niveaux et les longs paragraphes (enveloppés). Il est vraiment difficile d'obtenir une indentation cohérente en raison de la taille variable des marqueurs (1., 1.2, 1.10, 1.10.5, ) ; elle ne peut pas être simplement "simulée", même pas avec une marge/un renfort précalculé pour chaque niveau d'indentation possible.

J'ai finalement trouvé une solution qui fonctionne réellement et ne nécessite pas de JavaScript.

Il a été testé sur Firefox 32, Chromium 37, IE 9 et Android Browser. Ne fonctionne pas sur IE 7 et antérieur.

CSS:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

Exemple :

Essayez-le JSFiddle et de la fourchette. Gist .

Answer 3

La réponse choisie est un bon début, mais elle force essentiellement list-style-position: inside; sur les éléments de la liste, ce qui rend le texte enveloppé difficile à lire. Voici une solution de contournement simple qui permet également de contrôler la marge entre le numéro et le texte, et d'aligner le numéro à droite, conformément au comportement par défaut.

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle : http://jsfiddle.net/3J4Bu/

Answer 4

Note : Utilisez les CSS counter**s** pour créer une numérotation imbriquée dans un navigateur moderne. Voir la réponse acceptée. Ce qui suit n'a qu'un intérêt historique.

---

Si le navigateur prend en charge content et counter ,

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}

<ol class="foo">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
  <li>cuatro</li>
</ol>

Answer 5

Ce n'est pas le cas :

http://www.w3schools.com/css/pr_list-style-type.asp

Je ne vois rien de tel qui soit soutenu par CSS3 soit :

http://www.css3.com/css-list-style-type/

mais vous pouvez utiliser le remise à zéro du compteur css comme décrit ici :

http://www.w3schools.com/css/pr_gen_counter-reset.asp