Rumah >hujung hadapan web >html tutorial >【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose
【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:56:042007semak imbas
列表
- 标签的display:inline，把
- 设定为内联元素来实现横向排列的效果，不需要使用float。
<!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>
对，就是写成这样子（不知道是不是bug）
这个方法有一个弊端：li转为内联元素后，width、height就无效了，只能用padding来撑开宽高。也有一些不便。自己根据需要取舍吧。
- 等默认是纵向排列。我们需要它横向排列时通常会用float来实现，但是使用了float也通常会引发一些排版问题。今天我学到了另一种方法：
设定
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字体_html/css_WEB-ITnoseArtikel seterusnya：Codeforces Round #274 (Div. 2) C Exams_html/css_WEB-ITnose