Comment puis-je numéroter correctement les listes ordonnées imbriquées en HTML ?

Résoudre l'énigme des listes ordonnées imbriquées (1.1, 1.2) avec des compteurs et une portée

Encapsuler des listes ordonnées imbriquées dans une structure hiérarchique à l'aide de compteurs et sa portée peut être une entreprise formidable. L’une de ces énigmes rencontrées par les développeurs est la numérotation erronée dans ces listes. Cet article vise à exposer les subtilités derrière ce défi et à éclairer la voie vers une solution transparente.

Le problème

Dans une tentative de créer une liste ordonnée avec des sous-titres imbriqués -listes, un développeur rencontre un écart inattendu dans la numérotation :

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three (incorrect numbering)
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

Le résultat souhaité est cependant le 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

La solution

Pour résoudre cette énigme, deux considérations clés se posent :

1. Désactiver la normalisation CSS

Dans de nombreux cas, les ensembles de règles CSS utilisés pour la normalisation suppriment les marges et les remplissages par défaut appliqués aux listes. Cela peut perturber l'espacement prévu pour les listes imbriquées. Pour éviter de telles interférences, désactivez l'option de normalisation CSS.

2. Encapsuler les sous-listes

Pour garantir une énumération correcte, chaque sous-liste doit être incluse dans son élément de liste parent. Dans le code HTML fourni, les sous-listes doivent être encapsulées comme telles :

<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 résolvant ces problèmes, les développeurs peuvent construire efficacement des listes ordonnées avec des sous-listes imbriquées tout en conservant une numérotation précise.

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!