Liste ordonnée HTML 1.1, 1.2 (Compteurs imbriqués et portée) ne fonctionne pas

Question

J'utilise des compteurs imbriqués et des champs d'application pour créer une liste ordonnée :

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

<ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol>

Je m'attends au résultat suivant :

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

Au lieu de cela, voici ce que je vois (mauvaise numérotation) :

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three <!-- this is where it goes wrong, when going back to the parent -->
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

Je n'ai aucune idée, est-ce que quelqu'un voit où cela ne va pas ?

Voici une JSFiddle : http://jsfiddle.net/qGCUk/2/

Answer 1

Décochez la case "normaliser le CSS" - http://jsfiddle.net/qGCUk/3/ La réinitialisation CSS utilisée dans ce document fixe par défaut à 0 toutes les marges et tous les interlignes de la liste.

MISE À JOUR http://jsfiddle.net/qGCUk/4/ - vous devez inclure vos sous-listes dans votre liste principale <li>

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

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Answer 2

Utilisez ce style pour modifier uniquement les listes imbriquées :

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

Answer 3

Vérifiez ceci :

http://jsfiddle.net/PTbGc/

Votre problème semble avoir été résolu.

---

Ce qui s'affiche pour moi (sous Chrome et Mac OS X)

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

---

Comment j'ai procédé

---

Au lieu de :

<li>Item 1</li>
<li>Item 2</li>
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>

Faire :

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>

Answer 4

Je pense que ces réponses compliquent trop la situation. Si vous n'avez pas besoin de supporter Internet Explorer, la solution est simple :

ol > li::marker { content: counters(list-item, '.') '. '; }

<ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol>

Voir le ::marker Page de pseudo-éléments CSS et le Utilisation des compteurs CSS sur le site de référence CSS du MDN pour plus d'informations.

Answer 5

C'est une excellente solution ! Avec quelques règles CSS supplémentaires, vous pouvez le formater comme une liste de MS Word avec un retrait de première ligne suspendu :

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}