Mengapa Item Senarai Blok Sebaris Saya Mempunyai Margin yang Tidak Diingini?

Margin Tidak Diingini dalam Item Senarai Blok Sebaris

Masalah:
Anda mempunyai item senarai blok sebaris yang mempamerkan jidar di sekeliling secara tidak jelas mereka, walaupun menetapkan margin kepada 0 dalam CSS anda peraturan.

Punca:
Isu timbul daripada menggunakan paparan: inline-block; untuk item senarai. Elemen blok sebaris sensitif kepada ruang putih dan memperkenalkan jidar 4px di sebelah kanan setiap elemen.

Penyelesaian 1: apungan: kiri;
Untuk menghapuskan jidar, tukar paparan harta untuk terapung: kiri;. Ini mengalih keluar jarak yang diperkenalkan oleh blok sebaris.

Penyelesaian 2: Cegah Ruang Putih
Sebagai alternatif, anda boleh menghalang ruang putih daripada menjejaskan elemen blok sebaris dengan mengalih keluar semua ruang antara senarai teg item, seperti yang ditunjukkan di bawah:

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

Satu Penyelesaian Lain: Block End dan Teg Mula
Anda juga boleh menyekat tag penghujung dan mulakan bersama-sama, memaksa item senarai dianggap sebagai satu baris berterusan:

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

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