Bagaimana untuk Mencegah Pecah Baris dalam Item Senarai Menggunakan CSS?

Mencegah Pecah Baris dalam Item Senarai Menggunakan CSS

Apabila membuat menu dengan item senarai (teg li), anda mungkin menghadapi masalah di mana item berbilang perkataan, seperti pautan berlabel "Serahkan resume," balut pada berbilang baris kerana ruang kosong antara perkataan. Ini boleh mengganggu penjajaran dan kebolehbacaan menu. Untuk mengelakkan pembalut ini, CSS menawarkan penyelesaian.

Penyelesaian CSS:

Gunakan sifat ruang putih: nowrap. Ini menghalang pemisah baris dalam teks elemen, mengekalkannya pada satu baris. Dengan menggunakan sifat ini pada elemen li yang mengandungi item berbilang perkataan, anda boleh mengatasi kelakuan lalai dan memaksa teks kekal pada satu baris.

Sebagai alternatif, anda boleh menyediakan lebih banyak ruang untuk item tersebut dengan meningkatkan lebar elemen li menggunakan sifat lebar. Ini akan memberi teks lebih banyak ruang untuk disebarkan, menghapuskan keperluan untuk pemisah baris.

Contoh CSS:

li {
  white-space: nowrap;
}

Contoh HTML:

<ul>
  <li><a href="#">Submit resume</a></li>
</ul>

Dengan menggunakan teknik CSS ini, anda boleh menghalang pemisah baris dalam item senarai dan mengekalkan susun atur menu.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Pecah Baris dalam Item Senarai Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!