【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose
来源：懂视网
责编：小采
时间：2020-11-27 15:56:31
【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose
【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose:列表等默认是纵向排列。我们需要它横向排列时通常会用float来实现，但是使用了float也通常会引发一些排版问题。今天我学到了另一种方法：设定标签的display:inline，把设定为内联元素来实现横向排列的效果，不需要使用float。 列表横向排列的另一种方法ul
导读【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose:列表等默认是纵向排列。我们需要它横向排列时通常会用float来实现，但是使用了float也通常会引发一些排版问题。今天我学到了另一种方法：设定标签的display:inline，把设定为内联元素来实现横向排列的效果，不需要使用float。 列表横向排列的另一种方法ul
列表等默认是纵向排列。我们需要它横向排列时通常会用float来实现，但是使用了float也通常会引发一些排版问题。今天我学到了另一种方法：
设定
标签的display:inline，把设定为内联元素来实现横向排列的效果，不需要使用float。
列表横向排列的另一种方法
Item1 Item2 Item3 Item4效果：
等等，为什么li之间有空隙？？？
解决办法是：把li写成一行
对，就是写成这样子（不知道是不是bug）
这个方法有一个弊端：li转为内联元素后，width、height就无效了，只能用padding来撑开宽高。也有一些不便。自己根据需要取舍吧。
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose
【CSS技巧】列表横向排列的另一种方法_html/css_WEB-ITnose:列表等默认是纵向排列。我们需要它横向排列时通常会用float来实现，但是使用了float也通常会引发一些排版问题。今天我学到了另一种方法：设定标签的display:inline，把设定为内联元素来实现横向排列的效果，不需要使用float。 列表横向排列的另一种方法ul
