為什麼我的嵌套有序列表在 HTML 和 CSS 中顯示不正確的編號，如何修復它？

編號不正確的巢狀有序清單

使用 HTML 和 CSS 建立嵌套有序清單時會出現此問題。使用以下程式碼：

ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}

<ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <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
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

解：

要解決這個問題，有兩種解法：

1. 停用JSFiddle中的「規範化 CSS」。此選項將所有清單邊距和填滿預設為 0。
2. 在主
3. 中包含子列表元素，如下所示：

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>

一旦實現，排序列表將按預期顯示正確的編號。

以上是為什麼我的嵌套有序列表在 HTML 和 CSS 中顯示不正確的編號，如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！