Mengapa Terdapat Ruang Yang Tidak Diingini Antara Item Senarai Blok Sebaris dan Bagaimana Saya Boleh Membetulkannya?

Item Senarai Blok Sebaris dengan Ruang Tidak Diingini

Item senarai blok sebaris selalunya boleh mempamerkan ruang yang tidak diingini di antara mereka, menghalang penciptaan yang lancar menu.

Punca Spaces

Blok sebaris bergantung pada ruang putih dan bergantung pada tetapan fon. Secara lalai, fon mempunyai sedikit ruang putih (biasanya 4px) yang diberikan antara aksara. Ini boleh nyata sebagai jarak antara elemen blok sebaris.

Penyelesaian

Jalankan Garis Bersama

Satu pilihan ialah menghapuskan ruang dengan menjalankan semua item senarai dalam satu baris kod.

Tamat Sekat dan Mulakan Teg

Sebagai alternatif, sekat akhir dan mulakan teg bersama-sama:

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

Tetapkan Semula dan Tetapkan Semula Saiz Fon

Amalan yang disyorkan ialah untuk menetapkan semula saiz fon kepada 0 pada elemen induk dan menetapkannya semula kepada nilai yang dikehendaki pada blok sebaris elemen:

ul {
    font-size: 0;
}

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

Pendekatan ini mengekalkan kebolehbacaan HTML semasa menangani isu jarak dengan menetapkan semula tetapan ruang putih fon dan重新设定内容的字体大小。

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