Pourquoi la numérotation des listes ordonnées HTML imbriquées produit-elle parfois des résultats inattendus ?

Problèmes de numérotation de liste ordonnée HTML avec les compteurs et la portée imbriqués

En HTML, l'utilisation de compteurs et de portées imbriqués permet la création de compteurs à plusieurs niveaux listes ordonnées avec une numérotation distincte pour chaque niveau. Cependant, les utilisateurs peuvent rencontrer une numérotation incorrecte lors de l'intégration de cette technique.

Description du problème

Considérez le code HTML suivant, qui vise à générer une liste ordonnée imbriquée :

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

Le résultat attendu est une liste correctement numérotée comme suit :

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 affiché affiche une numérotation incorrecte :

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

Solution

Pour résoudre le problème, envisagez les approches suivantes :

Décochez « Normaliser CSS » :

L'option "normaliser CSS" présente dans certains outils de développement réinitialise les propriétés CSS, y compris les marges de liste et rembourrages. La désactivation de cette option garantit que les marges et les remplissages prévus sont préservés, permettant une numérotation correcte.

Inclure les sous-listes dans le

principal :

Encadrer tous les sous-listes -les listes au sein des éléments de la liste principale (

) garantissent une relation hiérarchique claire. Cela évite un regroupement incorrect et garantit que la numérotation est appliquée correctement.

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!