Bincang dan selesaikan masalah paparan css li tanpa pemutusan baris

Elemen li CSS sering digunakan untuk memaparkan maklumat senarai. Tetapi kadangkala, elemen li dibalut secara lalai, menjadikan kesan paparan tidak memuaskan. Oleh itu, kita perlu menggunakan gaya CSS untuk mengawal elemen li untuk dipaparkan tanpa memutuskan baris tanpa memusnahkan susun atur asal. Artikel berikut akan membincangkan dan menyelesaikan masalah ini.

1. Atribut ruang putih CSS

CSS menyediakan atribut ruang putih, yang boleh digunakan untuk mengawal pemprosesan ruang, pemisah baris, dll. dalam elemen. Nilai lalai atribut ini adalah normal, yang bermaksud kaedah pemprosesan adalah normal dan pembalut baris boleh dilakukan secara automatik. Selain itu, terdapat nilai berikut:

1. nowrap: mengelakkan teks daripada dibalut dan mengecut secara automatik kepada satu baris untuk paparan.
2. pra: Buat teks mengekalkan pemisah baris dan paparkannya mengikut format apabila dimasukkan.
3. pra-bungkus: Menyebabkan teks mengekalkan pemisah baris, tetapi membalut secara automatik mengikut keperluan.

Dengan menetapkan atribut ruang putih kepada nowrap, elemen li boleh dipaparkan tanpa membalut, seperti yang ditunjukkan dalam kod berikut:

ul li{
  white-space:nowrap;
}

Jika anda mahu melakukan ini untuk berbilang elemen li Tanpa membalut paparan, anda boleh menggunakan gaya terus pada elemen ul, seperti yang ditunjukkan dalam kod berikut:

ul{
  white-space:nowrap;
}

2. Atribut paparan CSS

Atribut paparan CSS boleh mengawal mod paparan elemen. Dalam elemen li, kawal paparan elemen tanpa membalut dengan menetapkan paparan kepada sekatan sebaris atau sebaris.

1. inline-block

Apabila elemen li ditetapkan kepada inline-block, ia akan dipaparkan sebagai deretan elemen peringkat blok dan atribut seperti lebar dan ketinggian boleh ditetapkan. Seperti yang ditunjukkan dalam kod berikut:

ul li{
  display:inline-block;
  width:100px;
  height:80px;
}

2. sebaris

Apabila elemen li ditetapkan kepada sebaris, ia akan dipaparkan sebagai baris elemen sebaris. Seperti yang ditunjukkan dalam kod berikut:

ul li{
  display:inline;
}

3 Atribut apungan CSS

Atribut apungan CSS boleh mengawal cara unsur terapung. Dalam elemen li, tetapkan apungan ke kiri atau kanan untuk mengawal paparan elemen tanpa membalut.

1. float:left

Apabila anda menetapkan elemen li kepada float:left, elemen akan terapung ke kiri, dan elemen berikut akan mengikuti. Seperti yang ditunjukkan dalam kod berikut:

ul li{
  float:left;
}

2. float:right

Apabila elemen li ditetapkan kepada float:right, elemen akan terapung betul, dan elemen sebelum ia akan menyusul tidak lama lagi. Seperti yang ditunjukkan dalam kod berikut:

ul li{
  float:right;
}

Nota: Apabila menggunakan atribut apungan, anda juga perlu bekerjasama dengan atribut yang jelas untuk mengelakkan kesan yang tidak dijangka.

Melalui kaedah di atas, kita boleh merealisasikan paparan elemen li tanpa membalut garisan tanpa memusnahkan susun atur asal. Dalam pembangunan sebenar, kita boleh mempertimbangkan kaedah mana yang hendak digunakan untuk melaraskan susun atur halaman mengikut situasi tertentu.

Atas ialah kandungan terperinci Bincang dan selesaikan masalah paparan css li tanpa pemutusan baris. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!