Mengapa Saya Mempunyai Ruang Yang Tidak Diingini Antara Item Senarai Blok Sebaris Saya?

Ruang Tidak Diingini Antara Item Senarai Blok Sebaris

Walaupun mengkonfigurasi item senarai sebagai elemen blok sebaris, pengguna sering menghadapi ruang yang tidak diingini di antara mereka. Isu ini berpunca daripada pergantungan ruang putih yang wujud bagi elemen blok sebaris dan tetapan fon.

Memahami Punca

Elemen blok sebaris memerlukan ruang putih untuk berfungsi dengan betul. Ruang antara item senarai adalah hasil daripada tetapan jarak fon, yang lalai kepada 4px. Memandangkan elemen blok sebaris diletakkan sebaris, jarak ini nyata sebagai jurang.

Penyelesaian Potensi

Untuk mengelakkan isu ruang, pertimbangkan penyelesaian berikut:

• Gabungkan Senarai Item dalam Baris Tunggal: Kumpulkan semua item senarai bersama pada satu baris, menghapuskan keperluan untuk ruang kosong.
• Teg Permulaan Interleave: Sertakan item senarai bersebelahan dalam satu blok:

<ul>
    <li><div>first</div></li><li><div>second</div></li><li><div>third</div></li><li><div>fourth</div></li>
</ul>

• Tetapkan Saiz Font Elemen Induk kepada 0: Tetapkan semula saiz fon elemen induk kepada sifar, menghapuskan jarak dengan berkesan:

ul {
    font-size: 0;
}

• Tetapkan Saiz Fon Elemen Kanak-kanak Secara Eksplisit: Tetapkan saiz fon khusus untuk item senarai sebaris:

ul li {
    font-size: 14px;
    display: inline-block;
}

Dengan mengikuti penyelesaian ini, anda boleh menghapuskan ruang yang tidak diingini antara item senarai blok sebaris dan mengekalkan reka letak yang diingini.

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