Pourquoi mes compteurs de listes ordonnées imbriquées ne fonctionnent-ils pas en HTML ?

Les compteurs de liste ordonnée HTML ne fonctionnent pas

Lorsque vous tentez de créer une liste ordonnée imbriquée à l'aide de compteurs et de portée, une numérotation incorrecte peut se produire. Cet article approfondira le problème, explorera la cause et proposera une solution.

Cause fondamentale

Le problème provient du paramètre « normaliser CSS », qui réinitialise la liste. marges et remplissages à zéro. Ce paramètre par défaut est en conflit avec le style requis pour une fonctionnalité de compteur appropriée.

Solution

Pour résoudre ce problème, désactivez l'option « normaliser CSS ». Vous pouvez également inclure des sous-listes dans l’élément de liste principal. Le code CSS et HTML suivant illustre ce correctif :

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>

En désactivant la réinitialisation CSS ou en modifiant la structure HTML, les compteurs de liste ordonnée fonctionneront correctement, affichant la numérotation attendue.

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!