Html liste ordonnée 1.1, 1.2 (Nested des compteurs et de la portée) ne fonctionne pas

Je imbriquer des compteurs et la possibilité de créer une liste ordonnée:

CSS:

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

HTML:

<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, c'est 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, personne ne voir où ça va mal?

Ici est un JSFiddle: http://jsfiddle.net/qGCUk/2/

InformationsquelleAutor dirk | 2012-05-01

Décochez la case "normaliser CSS" - http://jsfiddle.net/qGCUk/3/
Le CSS reset utilisés que par défaut tous les liste des marges externes et internes à 0

Mise à JOUR http://jsfiddle.net/qGCUk/4/ - vous devez inclure votre sous-listes dans votre principale <li>

CSS:

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

HTML:

<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>

Comment faire de son indice est suivie avec un point de 1. > 1.1. 1.2. 1.3. et ainsi de suite ?
href="http://jsfiddle.net/qGCUk/538/" >jsfiddle.net/qGCUk/538
Juste assurez-vous de régler les sélecteurs css de sorte qu'il n'affecte pas les choses comme les listes de navigation.
vraiment sympa solution merci beaucoup!

InformationsquelleAutor Zoltan Toth

Utiliser 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;
}

Super! Travaillé out-of-the-box pour moi! Toda.

InformationsquelleAutor Moshe Simantov

Check this out :

http://jsfiddle.net/PTbGc/

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

Ce qui montre 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>

Faire :

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

InformationsquelleAutor Dr.Kameleon

6

C'est une excellente solution! Avec quelques règles CSS vous pouvez formater le texte comme MS Word contour de la liste avec un accrochage première ligne tiret:
```
OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}
```
- Le problème avec cette approche est que vous ne pouvez pas copier les numéros de la liste. Donc, si vous copiez énorme liste, il sera sans numéros
InformationsquelleAutor ChaosFreak
2

J'ai rencontré le même problème récemment. La solution est de définir les propriétés d'affichage de la li éléments dans la liste ordonnée d'éléments de liste, et n'affiche pas de bloc, et de s'assurer que la propriété d'affichage de l'ol n'est pas élément de liste. j'.e
```
li { display: list-item;}
```
Avec cela, l'analyseur html voit tous li comme l'élément de la liste et attribuer une valeur à elle, et voit l'ol, comme un inline-block ou élément de bloc en fonction de vos paramètres, et ne pas essayer d'assigner n'importe quel nombre de la valeur.
- Cela duplique la numérotation.
InformationsquelleAutor Babatunde Calebs

Vous devez vous connecter pour publier un commentaire.