Rumah >hujung hadapan web >tutorial css >Mengapa Item Senarai Sekat Sebaris Mempunyai Margin yang Tidak Diingini dalam Firefox dan Chrome?

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

Susan Sarandon
Susan Sarandonasal
2024-12-06 05:46:10499semak imbas

Why Do Inline-Block List Items Have Unwanted Margins in Firefox and 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn