如何在 HTML 中正确编号嵌套有序列表？-css教程-PHP中文网

如何在 HTML 中正确编号嵌套有序列表？

DDD

发布： 2024-11-21 02:27:10

原创

455 人浏览过

How Can I Correctly Number Nested Ordered Lists in HTML?

使用计数器和范围解开嵌套有序列表（1.1、1.2）之谜

使用计数器将嵌套有序列表封装在分层结构中范围可能是一项艰巨的任务。开发人员遇到的难题之一是这些列表中的错误编号。本文旨在揭示这一挑战背后的复杂性，并阐明无缝解决方案的道路。

问题

尝试使用嵌套子创建有序列表-lists，开发人员在编号中遇到意外偏差：

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three (incorrect numbering)
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

登录后复制

然而，期望的结果是如下：

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。禁用 CSS 标准化

在许多情况下，用于标准化的 CSS 规则集会去除应用于列表的默认边距和填充。这可能会破坏嵌套列表的预期间距。为了防止此类干扰，请禁用 CSS 标准化选项。

2.封装子列表

为了确保正确枚举，每个子列表必须包含在其父列表项中。在提供的 HTML 代码中，子列表应如下封装：

<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 中正确编号嵌套有序列表？的详细内容。更多信息请关注PHP中文网其他相关文章！