简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

css如何实现li不换行显示

醉折花枝作酒筹
Lepaskan： 2023-01-05 16:10:58
asal
3563 orang telah melayarinya

实现方法：1、使用display属性将li转成行内或是行内块标签，只需要给li设置“display:inline|inline-block”样式即可；2、使用float属性进行浮动，只需要给元素设置“float:left”样式即可。

css如何实现li不换行显示

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

方法一：

display方法， 需要将li转换成行内标签或者行内块标签

<html>
<head>
    <style type="text/css">
        li {
              display: inline;  <-- 或者inline-block -->
              list-style:none; 
              margin:0 20px;
        }
        div {
              display: none；
        }
    </style>
</head>
<body>
<ul>
  <li>aa</li>
  <li>bb</li>
  <li>cc</li>
  <li>dd</li>
</ul>
</body>
</html>
Salin selepas log masuk

方法二：

选择左浮动方式， float：left；

<html>
<head>
    <style type="text/css">
        li {
              float: left; 
              list-style:none; 
              margin:0 20px;
        }
        div {
              display: none；
        }
    </style>
</head>
<body>
<ul>
  <li>aa</li>
  <li>bb</li>
  <li>cc</li>
  <li>dd</li>
</ul>
</body>
</html>
Salin selepas log masuk

推荐学习：css视频教程

Atas ialah kandungan terperinci css如何实现li不换行显示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
li
sumber：php.cn
Artikel sebelumnya：如何去掉css字体的上下空白 Artikel seterusnya：css如何让隐藏的元素显示出来
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Menggunakan Grid untuk Mencipta Reka Bentuk Khusus Ini: Panduan Langkah demi Langkah Saya cuba membuat reka letak yang serupa dengan imej ini, saya telah cuba menggunakan grid...
daripada 2024-04-06 20:29:08
0
2
492
Panduan React.js untuk menggunakan elemen pseudo `:selepas` dengan betul pada komponen yang digayakan Saya menjumpai animasi garis bawah yang cantik ini <ul><li><ahref="#&q...
daripada 2024-04-04 22:28:08
0
1
1322
Ungkapan biasa JavaScript untuk mengekalkan kandungan yang mengandungi perkataan tertentu dan menggantikan semua yang lain Saya rasa ini mudah, tetapi saya bergelut dengan situasi berikut: Rentetan (HTML diluluska...
daripada 2024-04-01 11:06:23
0
2
358
Vue: Peralihan menu lungsur turun dan cara menukar kelas elemen lain Saya mendapat ini (sangat mudah): <divclass="dropdownMenuWrapper"><ulcl...
daripada 2024-03-31 21:34:34
0
1
370
TypeError: Tidak dapat membaca sifat undefined (baca 'hari') <divclass="cont"><ul><liv-for="(value,key)idayappointment.vi...
daripada 2024-03-31 20:14:08
0
1
421
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！