Mengapa Terdapat Jurang Antara Item Senarai Sekatan Sebaris Saya dan Bagaimana Saya Boleh Membetulkannya?

Isu Interspace dalam Item Senarai Blok Sebaris

Pertanyaan:

Walaupun ada usaha untuk mencipta menu yang lancar, sebaris- item senarai blok memaparkan ruang yang ketara antara mereka.

Penyelesaian:

Jarak ini berlaku disebabkan sifat bergantung ruang putih bagi sifat blok sebaris, dipengaruhi oleh tetapan fon. Pada asalnya, ini memberikan ruang 4px antara setiap item.

Pendekatan Alternatif:

Kaedah 1:

• Jalankan semua item senarai dalam satu baris.

Kaedah 2:

• Sekat penghujung dan mulakan tag item senarai bersama-sama:

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

Penyelesaian Optimum:

• Tambah saiz fon: 0; kepada elemen induk dan tetapkan saiz fon khusus untuk item senarai:

ul {
    font-size: 0;
}

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

Pendekatan ini mengekalkan kebolehbacaan HTML sambil menghapuskan jarak yang tidak diingini yang disebabkan oleh tetapan lalai fon.

Atas ialah kandungan terperinci Mengapa Terdapat Jurang Antara Item Senarai Sekatan Sebaris Saya dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!