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

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

Susan Sarandon

Libérer： 2024-11-16 12:49:03

original

810 Les gens l'ont consulté

Why are my nested ordered lists displaying incorrect numbering in HTML and CSS, and how can I fix it?

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
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Solutions :

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

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

ol {
  counter-reset: item
}
li {
  display: block
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

Copier après la connexion

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

Copier après la connexion

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!