Why Does Nested HTML Ordered List Numbering Sometimes Produce Unexpected Results?

HTML Ordered List Numbering Issues with Nested Counters and Scope

In HTML, using nested counters and scope allows for the creation of multi-level ordered lists with distinct numbering for each level. However, users may encounter incorrect numbering when incorporating this technique.

Problem Description

Consider the following HTML code, which aims to generate a nested ordered list:

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

The expected outcome is a properly numbered list as follows:

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

However, the displayed output shows incorrect numbering:

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

To resolve the issue, consider the following approaches:

Uncheck "Normalize CSS":

The "normalize CSS" option present in some development tools resets CSS properties, including list margins and paddings. Disabling this option ensures that the intended margins and paddings are preserved, allowing for correct numbering.

Include Sub-Lists in Main

:

Enclose all sub-lists within the main list items (

) ensures a clear hierarchical relationship. This prevents incorrect grouping and ensures that numbering is applied correctly.

The above is the detailed content of Why Does Nested HTML Ordered List Numbering Sometimes Produce Unexpected Results?. For more information, please follow other related articles on the PHP Chinese website!