web-dev-qa-db-fra.com

La liste commandée HTML 1.1, 1.2 (Compteurs imbriqués et portée) ne fonctionne pas

J'utilise des compteurs et une portée imbriqués 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>

J'attends le 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ù ça va mal?

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

htmlcsshtml-lists
65
dirk

Décochez la case "normaliser CSS" - http://jsfiddle.net/qGCUk/3/ La réinitialisation CSS utilisée pour que toutes les marges et tous les bourrages de liste soient définis par défaut sur 0

[~ # ~] mettre à jour [~ # ~] http://jsfiddle.net/qGCUk/4/ - vous devez inclure vos sous-listes dans votre <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>
76
Zoltan Toth

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;
}
49
Moshe Simantov

Vérifiez ceci:

http://jsfiddle.net/PTbGc/

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

Ce qui se présente 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 je l'ai fait

Au lieu de: 

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

Faites: 

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>
13
Dr.Kameleon

C'est une excellente solution! Avec quelques règles CSS supplémentaires, vous pouvez le formater comme une liste hiérarchique 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;
}
6
ChaosFreak

J'ai rencontré un problème similaire récemment. Le correctif consiste à définir la propriété display des éléments li de la liste ordonnée sur list-item, et non le bloc display, et à s'assurer que la propriété display de ol n'est pas list-item. c'est à dire

li { display: list-item;}

Avec cela, l’analyseur html voit tout le li comme l’élément de la liste et lui attribue la valeur appropriée, ainsi que l’ol, un bloc en ligne ou un élément de bloc basé sur vos paramètres, et ne tente pas d’affecter une valeur de comptage à il.

2
Babatunde Calebs