Bagaimana untuk mengelakkan li in ul daripada membungkus dalam css-tutorial css-php.cn

Bagaimana untuk mengelakkan li in ul daripada membungkus dalam css

WBOY

Lepaskan： 2021-11-18 11:59:47

asal

3449 orang telah melayarinya

Kaedah css untuk menghalang li in ul daripada membalut: 1. Menggunakan atribut apungan, anda hanya perlu menambah gaya "{float:left;}" pada elemen li. 2. Menggunakan atribut paparan, anda hanya perlu menambah gaya "{display:inline;}" pada elemen li.

Bagaimana untuk mengelakkan li in ul daripada membungkus dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara membuat li in ul tidak membungkus dalam css

Cara membuat li dalam css tidak putus dalam baris beri anda Izinkan saya memperkenalkan cara menggunakan CSS untuk memaksa ul li tidak membalut. Ia mempunyai nilai rujukan tertentu Rakan-rakan yang memerlukan boleh merujuk kepadanya.

1 Gunakan gaya apungan untuk memaparkan elemen li bersebelahan tanpa membalut

Dalam CSS, anda boleh menggunakan atribut apungan untuk mengapungkan elemen li dan memaparkannya. sebelah menyebelah. Terapung ialah kaedah mengeluarkan elemen daripada aliran dokumen, mengalihkannya ke kiri atau kanan dan menyusun semula elemen di sekelilingnya.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
float: left;
margin-right: 10px;
list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>

Salin selepas log masuk

Perenderan:

Bagaimana untuk mengelakkan li in ul daripada membungkus dalam css

2 > Atribut paparan menentukan jenis kotak yang perlu dijana oleh elemen.

Atribut paparan digunakan untuk menentukan jenis kotak paparan yang dijana oleh elemen semasa membuat reka letak. Untuk jenis dokumen seperti HTML, menggunakan paparan secara sembarangan boleh berbahaya, kerana ia mungkin melanggar hierarki paparan yang telah ditakrifkan dalam HTML. Untuk XML, memandangkan XML tidak mempunyai hierarki jenis ini terbina dalam, semua paparan amat diperlukan.

sebaris: Lalai. Elemen ini akan dipaparkan sebagai elemen sebaris tanpa pemisah baris sebelum atau selepas elemen.

Gunakan paparan:sebaris untuk memaparkan elemen li sebagai elemen sebaris, tanpa pemisah baris sebelum dan selepas elemen.

Rendering:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
display:inline
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>

Salin selepas log masuk

Bagaimana untuk mengelakkan li in ul daripada membungkus dalam css Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan li in ul daripada membungkus dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!