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

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

Susan Sarandon

發布： 2024-11-16 12:49:03

原創

810 人瀏覽過

Why are my nested ordered lists displaying incorrect numbering in HTML and CSS, and how can I fix it?

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

使用 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

登入後複製

解：

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

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

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