如何控制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会出现横向滚动条,这样就实现了想要的效果