Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menghapuskan Ruang Yang Tidak Diingini Antara Item Senarai Blok Sebaris?

Bagaimanakah Saya Boleh Menghapuskan Ruang Yang Tidak Diingini Antara Item Senarai Blok Sebaris?

Linda Hamilton
Linda Hamiltonasal
2024-12-17 21:26:15632semak imbas

How Can I Eliminate Unwanted Spaces Between Inline-Block List Items?

Ruang putih dalam Item Senarai Blok Sebaris Diselesaikan

Item senarai blok sebaris selalunya mempamerkan ruang yang tidak diingini di antara item tersebut. Isu ini timbul disebabkan sifat unsur blok sebaris yang bergantung kepada ruang putih dan tetapan jarak fon.

Untuk menyelesaikannya, pertimbangkan langkah berikut:

  • Sekat Bersama : Gabungkan item senarai anda ke dalam satu baris untuk jarak optimum.
  • Sertai Teg: Balut teg item senarai bersama-sama, menghapuskan ruang antara setiap item:
<ul>
    <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>

Sebagai alternatif, anda boleh menghapuskan ruang putih dengan menetapkan saiz fon elemen induk kepada 0:

ul {
    font-size: 0;
}

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

Kaedah ini menetapkan semula jarak fon untuk elemen induk dan melaraskannya secara berasingan untuk item senarai individu kandungan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghapuskan Ruang Yang Tidak Diingini Antara Item Senarai Blok Sebaris?. 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