为什么我的嵌套有序列表在 HTML 和 CSS 中显示不正确的编号，如何修复它？-css教程-PHP中文网

为什么我的嵌套有序列表在 HTML 和 CSS 中显示不正确的编号，如何修复它？

Susan Sarandon

发布： 2024-11-16 12:49:03

原创

810 人浏览过

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

编号不正确的嵌套有序列表

使用 HTML 和 CSS 创建嵌套有序列表时会出现此问题。使用以下代码：

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

登录后复制

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

登录后复制

错误输出：

预期输出应类似于：

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

登录后复制

但是，实际结果显示不正确编号：

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

登录后复制

解决方案：

要解决此问题，有两种解决方案：

禁用“标准化 CSS” JSFiddle。此选项将所有列表边距和填充默认为 0。
在主
中包含子列表元素，如下所示：

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>

登录后复制

一旦实现，排序列表将按预期显示正确的编号。

以上是为什么我的嵌套有序列表在 HTML 和 CSS 中显示不正确的编号，如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！