列表<ul><dl>等默認是縱向排列。我們需要它橫向排列時通常會用float來實現，但是使用了float也通常會引發一些排版問題。今天我學到了另一種方法：
設定<li>標簽的display:inline，把<li>設定為內聯元素來實現橫向排列的效果，不需要使用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來撐開寬高。也有一些不便。自己根據需要取舍吧。
（個人原創，轉載請注明並附帶鏈接）