Why are my nested ordered lists displaying incorrect numbering in HTML and CSS, and how can I fix it?-CSS Tutorial-php.cn

Why are my nested ordered lists displaying incorrect numbering in HTML and CSS, and how can I fix it?

Susan Sarandon

Release： 2024-11-16 12:49:03

Original

810 people have browsed it

Why are my nested ordered lists displaying incorrect numbering in HTML and CSS, and how can I fix it?

Nested Ordered Lists with Incorrect Numbering

This issue arises when creating nested ordered lists using HTML and CSS. The following code is used:

ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}

Copy after login

<ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol>

Copy after login

Incorrect Output:

The expected output should resemble:

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

Copy after login

However, the actual outcome displays incorrect numbering:

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

Copy after login

Solutions:

To resolve this issue, two solutions are available:

Disable "Normalize CSS" in JSFiddle. This option defaults all list margins and paddings to 0.
Include sub-lists within the main
elements, as shown below:

ol {
  counter-reset: item
}
li {
  display: block
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

Copy after login

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

Copy after login

Once implemented, the ordered lists will display the correct numbering as intended.

The above is the detailed content of Why are my nested ordered lists displaying incorrect numbering in HTML and CSS, and how can I fix it?. For more information, please follow other related articles on the PHP Chinese website!