為什麼嵌套 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中文網其他相關文章！