为什么嵌套 HTML 有序列表编号有时会产生意外结果？-css教程-PHP中文网

为什么嵌套 HTML 有序列表编号有时会产生意外结果？

Linda Hamilton

发布： 2024-12-03 13:55:10

原创

728 人浏览过

Why Does Nested HTML Ordered List Numbering Sometimes Produce Unexpected Results?

嵌套计数器和作用域的 HTML 有序列表编号问题

在 HTML 中，使用嵌套计数器和作用域允许创建多级计数器每个级别都有不同编号的有序列表。但是，用户在采用此技术时可能会遇到错误的编号。

问题描述

考虑以下 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>

登录后复制

预期结果是一个正确编号的列表，如下所示如下所示：

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 (Incorrect)
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

登录后复制

解决方案

要解决此问题，请考虑以下操作方法：

取消选中“标准化CSS":

某些开发工具中存在的“规范化 CSS”选项会重置 CSS 属性，包括列表边距和填充。禁用此选项可确保保留预期的边距和填充，从而实现正确的编号。

在主目录中包含子列表

：

包含所有子列表-主列表项内的列表 (

) 确保清晰的层次关系。这可以防止错误分组并确保正确应用编号。

以上是为什么嵌套 HTML 有序列表编号有时会产生意外结果？的详细内容。更多信息请关注PHP中文网其他相关文章！