如何在 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中文網其他相關文章！