Mengapa Kaunter Senarai Tertib Bersarang Saya Tidak Berfungsi dalam HTML?

Kaunter Senarai Tertib HTML Tidak Berfungsi

Apabila cuba membuat senarai tersusun bersarang menggunakan pembilang dan skop, penomboran yang salah mungkin berlaku. Artikel ini akan menyelidiki isu ini, meneroka punca dan menyediakan penyelesaian.

Punca Punca

Masalah timbul daripada tetapan "normalize CSS", yang menetapkan semula senarai jidar dan pelapik kepada sifar. Tetapan lalai ini bercanggah dengan penggayaan yang diperlukan untuk kefungsian balas yang betul.

Penyelesaian

Untuk menyelesaikannya, lumpuhkan pilihan "normalize CSS". Sebagai alternatif, sertakan sub-senarai dalam elemen senarai utama. Kod CSS dan HTML berikut menunjukkan pembetulan ini:

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>

Dengan melumpuhkan tetapan semula CSS atau dengan mengubah suai struktur HTML, pembilang senarai tersusun akan berfungsi dengan betul, memaparkan penomboran yang dijangkakan.

Atas ialah kandungan terperinci Mengapa Kaunter Senarai Tertib Bersarang Saya Tidak Berfungsi dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!