css ul li列表标签并排不换行显示

如何使用CSS样式让ul li列表标签布局并排显示不换行篇

默认li列表布局多列显示
默认ul li布局竖列显示

这里divcss5介绍使用两种使用css样式让li标签布局并排显示，一种使用css display，另外一种使用css float浮动。

一、使用display让li并排显示 - TOP

CSS样式单词：
display:inline

具体CSS+DIV代码如下

1、不换行横向并排CSS代码：

li{ display:inline}

2、HTML代码片段：

<ul> 
<li><a href="http://www.divcss5.com/">DIVCSS5</a></li> 
<li><a href="http://www.css5.com.cn/">CSS制作</a></li> 
<li><a href="http://www.divcss5.com/">DIV CSS</a></li> 
</ul>

3、案例效果截图

css解决li并排显示截图
使用display让li布局并排显示截图

二、使用float浮动样式让li并排显示 - TOP

单词：float:left

1、解决css样式代码：

<style> 
li{ float:left; list-style:none} 
/* CSS注释：加list-style:none去掉li默认产生”点“ */ 
</style>

2、html代码片段：

<ul> 
<li><a href="http://www.divcss5.com/">DIVCSS5</a></li> 
<li><a href="http://www.css5.com.cn/">CSS制作</a></li> 
<li><a href="http://www.divcss5.com/">DIV CSS</a></li> 
</ul>

3、案例截图

用float解决并排显示
使用float解决横排显示截图

三、li并排显示总结 - TOP

这里DIVCSS5介绍两种情况解决，当然还有其他解决实现方法。大家下来可以实践以上两种方法并掌握，灵活运用。

扩展了解：
1、多个div并排显示
2、css li列表

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/wenji/w479.shtml