Rumah > Artikel > hujung hadapan web > css列表怎么横着排列
css列表怎么横着排列
- 王林asal
- 2020-11-16 09:29:3312574semak imbas
css列表横着排列的方法：可以利用【display:inline】属性把【25edfb22a4f469ecb59f1190150159c6】标签设定为内联元素来实现横向排列效果。display属性规定了元素应该生成的框的类型。
思路：
设定25edfb22a4f469ecb59f1190150159c6标签的display:inline，把25edfb22a4f469ecb59f1190150159c6设定为内联元素来实现横向排列的效果。
（推荐教程：css视频教程）
属性介绍：
display 属性规定元素应该生成的框的类型。
具体代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表横向排列的另一种方法</title>
<style type="text/css">
ul li{display:inline;background:#F93; padding:5px;}}
</style>
</head>
<body>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</body>
</html>效果：
问题：
li之间有空隙
解决办法：
把li写成一行
<ul>
<li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li>
</ul>效果：
相关推荐：CSS教程
Atas ialah kandungan terperinci 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：css文件中引用图片不显示怎么办Artikel seterusnya：css怎么才能让字等距分开