Warum zeigen meine verschachtelten geordneten Listen in HTML und CSS eine falsche Nummerierung an und wie kann ich das beheben?

Verschachtelte geordnete Listen mit falscher Nummerierung

Dieses Problem tritt beim Erstellen verschachtelter geordneter Listen mit HTML und CSS auf. Der folgende Code wird verwendet:

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>

Falsche Ausgabe:

Die erwartete Ausgabe sollte wie folgt aussehen:

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

Allerdings Das tatsächliche Ergebnis zeigt eine falsche Nummerierung an:

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

Lösungen:

Um dieses Problem zu beheben, stehen zwei Lösungen zur Verfügung:

1. Deaktivieren „CSS normalisieren“ in JSFiddle. Diese Option setzt alle Listenränder und -abstände standardmäßig auf 0.
2. Unterlisten in die Hauptliste einbeziehen
3. Elemente, wie unten gezeigt:

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>

Nach der Implementierung zeigen die geordneten Listen wie vorgesehen die richtige Nummerierung an.

Das obige ist der detaillierte Inhalt vonWarum zeigen meine verschachtelten geordneten Listen in HTML und CSS eine falsche Nummerierung an und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!