Pourquoi mes listes ordonnées imbriquées affichent-elles une numérotation incorrecte en HTML et CSS, et comment puis-je y remédier ?

Listes ordonnées imbriquées avec une numérotation incorrecte

Ce problème survient lors de la création de listes ordonnées imbriquées à l'aide de HTML et CSS. Le code suivant est utilisé :

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>

Sortie incorrecte :

La sortie attendue doit ressembler à :

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

Cependant, le résultat réel affiche une numérotation incorrecte :

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

Solutions :

Pour résoudre ce problème, deux solutions sont disponibles :

1. Désactiver "Normaliser CSS" dans JSFiddle. Cette option définit par défaut toutes les marges et remplissages de liste sur 0.
2. Inclure les sous-listes dans le fichier
3. éléments, comme indiqué ci-dessous :

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>

Une fois mises en œuvre, les listes ordonnées afficheront la numérotation correcte comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!