Warum funktionieren meine Zähler für verschachtelte geordnete Listen in HTML nicht?

HTML-Zähler für geordnete Listen funktionieren nicht

Beim Versuch, eine verschachtelte geordnete Liste mithilfe von Zählern und Bereichen zu erstellen, kann es zu einer falschen Nummerierung kommen. In diesem Artikel wird das Problem genauer untersucht, die Ursache untersucht und eine Lösung bereitgestellt.

Ursache

Das Problem ergibt sich aus der Einstellung „CSS normalisieren“, die die Liste zurücksetzt Ränder und Abstände auf Null. Diese Standardeinstellung steht im Konflikt mit dem Stil, der für die ordnungsgemäße Zählerfunktionalität erforderlich ist.

Lösung

Um dieses Problem zu beheben, deaktivieren Sie die Option „CSS normalisieren“. Alternativ können Sie Unterlisten in das Hauptlistenelement einbinden. Der folgende CSS- und HTML-Code demonstriert diesen Fix:

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>

Durch Deaktivieren des CSS-Resets oder durch Ändern der HTML-Struktur funktionieren die Zähler für geordnete Listen ordnungsgemäß und zeigen die erwartete Nummerierung an.

Das obige ist der detaillierte Inhalt vonWarum funktionieren meine Zähler für verschachtelte geordnete Listen in HTML nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!