Mengapa Penomboran Senarai Tertib HTML Bersarang Kadangkala Menghasilkan Keputusan Yang Tidak Dijangka?

Isu Penomboran Senarai Tersusun HTML dengan Pembilang Bersarang dan Skop

Dalam HTML, menggunakan pembilang bersarang dan skop membolehkan penciptaan pelbagai peringkat senarai tersusun dengan penomboran yang berbeza untuk setiap peringkat. Walau bagaimanapun, pengguna mungkin menghadapi penomboran yang salah apabila menggabungkan teknik ini.

Penerangan Masalah

Pertimbangkan kod HTML berikut, yang bertujuan untuk menjana senarai tertib bersarang:

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

Hasil yang dijangkakan ialah senarai bernombor dengan betul sebagai berikut:

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, output yang dipaparkan menunjukkan penomboran yang salah:

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three (Incorrect)
  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, pertimbangkan perkara berikut approaches:

Nyahtanda "Normalize CSS":

Pilihan "normalize CSS" yang terdapat dalam beberapa alatan pembangunan menetapkan semula sifat CSS, termasuk margin senarai dan pelapik. Melumpuhkan pilihan ini memastikan margin dan pelapik yang dimaksudkan dikekalkan, membenarkan penomboran yang betul.

Sertakan Sub-Senarai dalam