How Can I Correctly Number Nested Ordered Lists in HTML?

Unraveling the Enigma of Nested Ordered Lists (1.1, 1.2) with Counters and Scope

Encapsulating nested ordered lists within a hierarchical structure using counters and scope can be a formidable undertaking. One such conundrum encountered by developers is the erroneous numbering within these lists. This article aims to expose the intricacies behind this challenge and illuminate the path to a seamless solution.

The Problem

In an attempt to create an ordered list with nested sub-lists, a developer encounters an unexpected deviation in the numbering:

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three (incorrect numbering)
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

The desired outcome, however, is 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

The Solution

To resolve this enigma, two key considerations arise:

1. Disable CSS Normalization

In many cases, the CSS rulesets employed for normalization strip away the default margins and paddings applied to lists. This can disrupt the intended spacing for nested lists. To prevent such interference, disable the CSS normalization option.

2. Encapsulate Sub-lists

To ensure proper enumeration, each sub-list must be enclosed within its parent list item. In the provided HTML code, the sub-lists should be encapsulated as such:

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

By addressing these issues, developers can effectively construct ordered lists with nested sub-lists while maintaining accurate numbering.

The above is the detailed content of How Can I Correctly Number Nested Ordered Lists in HTML?. For more information, please follow other related articles on the PHP Chinese website!