Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengelakkan li in ul daripada membungkus dalam css

Bagaimana untuk mengelakkan li in ul daripada membungkus dalam css

WBOYasal: 2021-11-18 11:59:473417semak imbas

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.

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>

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>

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!

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

Artikel sebelumnya：Bagaimana untuk menulis segitiga dalam css3Artikel seterusnya：Bagaimana untuk menulis segitiga dalam css3

Artikel berkaitan

Lihat lagi