Warum führt die Nummerierung verschachtelter HTML-geordneter Listen manchmal zu unerwarteten Ergebnissen?

Probleme bei der Nummerierung geordneter HTML-Listen mit verschachtelten Zählern und Bereichen

In HTML ermöglicht die Verwendung verschachtelter Zähler und Bereiche die Erstellung mehrstufiger Listen geordnete Listen mit eindeutiger Nummerierung für jede Ebene. Allerdings kann es bei der Verwendung dieser Technik zu einer falschen Nummerierung kommen.

Problembeschreibung

Betrachten Sie den folgenden HTML-Code, der darauf abzielt, eine verschachtelte geordnete Liste zu generieren:

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

Das erwartete Ergebnis ist eine ordnungsgemäß nummerierte Liste wie folgt:

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

Jedoch wird das angezeigt Die Ausgabe zeigt eine falsche Nummerierung:

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

Lösung

Um das Problem zu beheben, ziehen Sie die folgenden Ansätze in Betracht:

Deaktivieren Sie „CSS normalisieren“. ":

Die in einigen Entwicklungstools vorhandene Option „CSS normalisieren“ setzt CSS-Eigenschaften zurück, einschließlich Listenrändern und Polsterungen. Durch Deaktivieren dieser Option wird sichergestellt, dass die vorgesehenen Ränder und Abstände erhalten bleiben und eine korrekte Nummerierung ermöglicht wird.

Unterlisten in Hauptliste einschließen

:

Alle Unterlisten einschließen -Listen innerhalb der Hauptlistenelemente (

) sorgen für eine klare hierarchische Beziehung. Dies verhindert eine falsche Gruppierung und stellt sicher, dass die Nummerierung korrekt angewendet wird.

Das obige ist der detaillierte Inhalt vonWarum führt die Nummerierung verschachtelter HTML-geordneter Listen manchmal zu unerwarteten Ergebnissen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!