Why Aren\'t My Nested Ordered List Counters Working in HTML?

HTML Ordered List Counters Not Working

When attempting to create a nested ordered list using counters and scope, incorrect numbering may occur. This article will delve into the issue, exploring the cause and providing a solution.

Root Cause

The problem arises from the "normalize CSS" setting, which resets list margins and paddings to zero. This default setting conflicts with the styling required for proper counter functionality.

Solution

To resolve this, disable the "normalize CSS" option. Alternatively, include sub-lists within the main list element. The following CSS and HTML code demonstrates this 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>

By disabling the CSS reset or by modifying the HTML structure, the ordered list counters will function correctly, displaying the expected numbering.

The above is the detailed content of Why Aren't My Nested Ordered List Counters Working in HTML?. For more information, please follow other related articles on the PHP Chinese website!