【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose

列表 等默认是纵向排列。我们需要它横向排列时通常会用float来实现，但是使用了float也通常会引发一些排版问题。今天我学到了另一种方法：
设定 标签的display:inline，把 设定为内联元素来实现横向排列的效果，不需要使用float。

     列表横向排列的另一种方法  ul li{display:inline;background:#F93; padding:5px;}}         Item1      Item2      Item3      Item4     

效果：

等等，为什么li之间有空隙？？？

解决办法是：把li写成一行

      Item1  Item2  Item3  Item4   

对，就是写成这样子（不知道是不是bug）

这个方法有一个弊端：li转为内联元素后，width、height就无效了，只能用padding来撑开宽高。也有一些不便。自己根据需要取舍吧。

查看更多关于【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose的详细内容...