Mengapa Item Senarai Sekat Sebaris Mempunyai Margin yang Tidak Diingini dalam Firefox dan Chrome?

Margin Tidak Diingini dalam Item Senarai Blok Sebaris

Seperti yang digariskan dalam kod HTML dan CSS yang diberikan, fenomena margin yang tidak diingini muncul di sekitar sebaris -item senarai blok telah diperhatikan. Isu ini berlaku semata-mata dalam penyemak imbas seperti Firefox dan Chrome, yang membawa kepada ruang kosong yang tidak dapat dijelaskan antara item senarai.

Penyebabnya terletak pada paparan: inline-block; harta yang digunakan untuk menyenaraikan item. Tetapan ini menganggap item sebagai blok individu yang mengalir dalam bekas induk. Walau bagaimanapun, elemen blok sebaris mewarisi peraturan ruang putih bagi elemen sebaris, yang termasuk jarak lalai antara elemen sebaris.

Untuk membetulkan keadaan ini, pertimbangkan untuk menggantikan paparan: blok sebaris; dengan apungan: kiri;. Suis ini membenarkan item senarai berbaris sebelah menyebelah tanpa sebarang jidar tambahan.

Sebagai alternatif, anda boleh mengalih keluar jidar sepenuhnya dengan meletakkan semua item senarai pada satu baris, seperti:

<ul>
    <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>

Penyelesaian lain melibatkan menyekat tag HTML bersama-sama:

<ul>
    <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>

Dengan menggunakan teknik ini, anda boleh menghapuskan yang tidak diingini dengan berkesan jidar mengelilingi item senarai blok sebaris.

Atas ialah kandungan terperinci Mengapa Item Senarai Sekat Sebaris Mempunyai Margin yang Tidak Diingini dalam Firefox dan Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!