css怎么让三个标签横排呢？

html-css010

css怎么让三个标签横排呢？,第1张

如何控制css让三个标签横排显示或者三个以上的标签横排，其实都是一样的，下面演示一下，通过控制li标签实现横排显示；

1、打开所需测试的软件，创建一个新的html

2、写入要实现效果的代码：

3、利用css来控制横排展示；

4、展示的效果为：

详解css：主要是控制li标签的靠左浮动：float:left；当然，展示在一排，靠右浮动也是可以的，list-style-type:none意思是：去除图2展示的前面的点；至于margi-right:20px；让li标签与右侧外边距离为20px

设置ul一个固定的宽度，如：width：1000px

设置ul横向超出后自动。overflow-x：auto

设置ul竖向超出隐藏

有足够多的li，li的width设置为100px ，li的数量最少为11个

因为li数量多，导致ul会出现横向滚动条，这样就实现了想要的效果