Heim > Artikel > Web-Frontend > 【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose
【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:041999Durchsuche
列表
- 标签的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也通常会引发一些排版问题。今天我学到了另一种方法：
设定
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS字体_html/css_WEB-ITnoseNächster Artikel：Codeforces Round #274 (Div. 2) C Exams_html/css_WEB-ITnose