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

87

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

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/

html css html-lists poignard
la source

Réponses:

102

Décochez "normaliser CSS" - http://jsfiddle.net/qGCUk/3/ La réinitialisation CSS utilisée dans qui définit par défaut toutes les marges et les rembourrages de la liste à 0

UPDATE 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>
Développer l'extrait

Zoltan Toth
la source
2
Comment faire suivre son index avec un point - comme 1.> 1.1. 1.2. 1.3.et ainsi de suite?
URL87
2
Assurez-vous simplement de corriger les sélecteurs css afin que cela n'affecte pas des choses comme les listes de navigation.
Okomikeruko
@Okomikeruko Que signifie «réparer les sélecteurs css»? Parce que j'exécute exactement le problème auquel vous avez fait allusion - cette astuce n'affecte pas seulement la liste numérotée pour laquelle je veux l'utiliser, mais aussi les autres listes de mon HTML. : - \ Nevermind: La réponse de Moshe Simantov corrige cela. :)
antred le
1
Les attributs d'élément @antred aiment idet classvous permettent de définir des css spécifiques à ces éléments avec des sélecteurs. Si vous utilisez une couverture li, ul, oletc, le css affecte toutes les instances de celui - ci. Mais si vous définissez votre élément sur <ol class="cleared">et votre sélecteur css sur ol.cleared, vous n'affectez pas olinutilement les autres éléments.
Okomikeruko le
64

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;
}
Moshe Simantov
la source
2
Génial! Cela a fonctionné hors de la boîte pour moi! Toda.
yO_
3
C'est la meilleure réponse car elle a également le premier niveau avec un point et incrusté le contenu.
Martin Eckleben le
si j'ajoute font-weight: boldaux ol ol > li:beforecompteurs de la liste imbriquée boldmais que cela ne fait pas les compteurs de la liste de premier niveau bold?
Sushmit Sagar le
14

Regarde ça :

http://jsfiddle.net/PTbGc/

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

Ce qui me ressort (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>
Dr Kameleon
la source
7

C'est une excellente solution! Avec quelques règles CSS supplémentaires, vous pouvez le formater comme une liste de plan 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;
}
ChaosFreak
la source
2
Le problème avec cette approche est que vous ne pouvez pas copier les numéros de liste. Donc, si vous copiez une énorme liste, ce sera sans numéros
Rohit
1

J'ai rencontré un problème similaire récemment. Le correctif consiste à définir la propriété d'affichage des éléments li dans la liste ordonnée sur list-item, et non sur display block, 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 all li comme l'élément de liste et lui attribue la valeur appropriée, et voit l'ol, comme un élément de bloc ou de bloc en ligne basé sur vos paramètres, et n'essaye pas d'attribuer une valeur de comptage à il.

Babatunde Calebs
la source
Cela duplique la numérotation.
TylerH
0

La solution de Moshe est excellente, mais le problème peut toujours exister si vous devez placer la liste dans un fichier div. (lire: réinitialisation du compteur CSS sur la liste imbriquée )

Ce style pourrait éviter ce problème:

ol > li {
    counter-increment: item;
}

ol > li:first-child {
  counter-reset: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
<ol>
  <li>list not nested in div</li>
</ol>

<hr>

<div>
  <ol>
  <li>nested in div</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>
</div>
Développer l'extrait

Vous pouvez également activer la réinitialisation du compteur li:before.

saboshi69
la source
que faire si je ne veux pas la fin .de la liste imbriquée mais la liste racine?
Sushmit Sagar le
0

Après avoir parcouru d'autres réponses, j'ai trouvé ceci, appliquez simplement la classe nested-counter-listà la olbalise racine :

code sass:

ol.nested-counter-list {
  counter-reset: item;

  li {
    display: block;

    &::before {
      content: counters(item, ".") ". ";
      counter-increment: item;
      font-weight: bold;
    }
  }

  ol {
    counter-reset: item;

    & > li {
      display: block;

      &::before {
        content: counters(item, ".") " ";
        counter-increment: item;
        font-weight: bold;
      }
    }
  }
}

code css :

ol.nested-counter-list {
  counter-reset: item;
}
ol.nested-counter-list li {
  display: block;
}
ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}
ol.nested-counter-list ol {
  counter-reset: item;
}
ol.nested-counter-list ol > li {
  display: block;
}
ol.nested-counter-list ol > li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}


ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

ol.nested-counter-list ol>li {
  display: block;
}

ol.nested-counter-list ol>li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}
<ol class="nested-counter-list">
  <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>
Développer l'extrait

Et si vous avez besoin d'une fin .à la fin des compteurs de la liste imbriquée, utilisez ceci:

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}
<ol class="nested-counter-list">
  <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>
Développer l'extrait

Sushmit Sagar
la source