How to Fix Nested Ordered List Numbering Issues in HTML?

HTML Ordered Lists: Nested Counters and Scope Issues

In HTML, using CSS counters and scope can help create structured ordered lists. However, sometimes issues arise when attempting to nest these counters.

The Problem

When setting up nested ordered lists with counters, some may encounter incorrect numbering in the child lists. Instead of the expected nested structure, the numbering may continue incrementally from the parent list upon returning to it.

The Solution

To address this issue, ensure that the Normalize CSS is disabled. In older browsers, this CSS reset often sets all list margins and paddings to zero, leading to alignment problems. Alternatively, nesting the sub-lists within the main

elements can resolve the issue.

Example

<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 above is the detailed content of How to Fix Nested Ordered List Numbering Issues in HTML?. For more information, please follow other related articles on the PHP Chinese website!