Mengapakah senarai tersusun bersarang saya memaparkan penomboran yang salah dalam HTML dan CSS, dan bagaimanakah saya boleh membetulkannya?

Senarai Tersusun Bersarang dengan Penomboran Salah

Isu ini timbul apabila membuat senarai tersusun bersarang menggunakan HTML dan CSS. Kod berikut digunakan:

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>

Output Salah:

Output yang dijangkakan sepatutnya menyerupai:

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

Walau bagaimanapun, hasil sebenar memaparkan penomboran yang salah:

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

Penyelesaian:

Untuk menyelesaikan isu ini, dua penyelesaian tersedia:

1. Lumpuhkan "Normalkan CSS" dalam JSFiddle. Pilihan ini melalaikan semua margin senarai dan pelapik kepada 0.
2. Sertakan sub-senarai dalam
3. elemen, seperti yang ditunjukkan di bawah:

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>

Setelah dilaksanakan, senarai tersusun akan memaparkan penomboran yang betul seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapakah senarai tersusun bersarang saya memaparkan penomboran yang salah dalam HTML dan CSS, dan bagaimanakah saya boleh membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!