为什么我的嵌套有序列表计数器不能在 HTML 中工作？

HTML 有序列表计数器不起作用

尝试使用计数器和范围创建嵌套有序列表时，可能会出现错误编号。本文将深入研究该问题，探究原因并提供解决方案。

根本原因

问题源于“标准化 CSS”设置，该设置会重置列表边距和填充为零。此默认设置与正确计数器功能所需的样式冲突。

解决方案

要解决此问题，请禁用“规范化 CSS”选项。或者，在主列表元素中包含子列表。以下 CSS 和 HTML 代码演示了此修复：

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>

通过禁用 CSS 重置或修改 HTML 结构，有序列表计数器将正确运行，显示预期的编号。

以上是为什么我的嵌套有序列表计数器不能在 HTML 中工作？的详细内容。更多信息请关注PHP中文网其他相关文章！