如何使用CSS样式让ul li列表标签布局并排显示不换行篇
![2a2c57632cb5b8efaaf7e6ec23719f75.png](https://img-blog.csdnimg.cn/img_convert/2a2c57632cb5b8efaaf7e6ec23719f75.png)
默认ul li布局竖列显示
这里CSS5介绍使用两种使用css样式让li标签布局并排显示,一种使用css display,另外一种使用css float浮动。
一、使用display让li并排显示
CSS样式单词:
display:inline
1、不换行横向并排CSS代码:
li{ display:inline}
2、HTML代码片段:
3、案例效果截图
![986b1023eb7a703ad7d842c30e670261.png](https://img-blog.csdnimg.cn/img_convert/986b1023eb7a703ad7d842c30e670261.png)
使用display让li布局并排显示截图
二、使用float浮动样式让li并排显示
单词:float:left
1、解决css样式代码:
li{ float:left; list-style:none}
/* CSS注释:加list-style:none去掉li默认产生”点“ */
2、html代码片段:
3、案例截图
![b42b0f392fd99b46c0fed6dc1a2a1f2f.png](https://img-blog.csdnimg.cn/img_convert/b42b0f392fd99b46c0fed6dc1a2a1f2f.png)
使用css float解决横排显示截图
三、li并排显示总结
这里CSS5介绍两种情况解决,当然还有其他解决实现方法。大家下来可以实践以上两种方法并掌握,灵活运用。
作者:css5