默認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</a></li> 
<li><a href="http://www./">CSS制作</a></li> 
<li><a href="http://www./">DIV CSS</a></li> 
</ul> 

3、案例效果截圖

使用display讓li布局并排顯示截圖

二、使用float浮動樣式讓li并排顯示   -   TOP

單詞：float:left

1、解決css樣式代碼：

<style> 
li{ float:left; list-style:none} 
/* CSS注釋：加list-style:none去掉li默認產(chǎn)生”點“ */ 
</style> 

2、html代碼片段：

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

3、案例截圖

使用float解決橫排顯示截圖

三、li并排顯示總結   -   TOP

這里DIVCSS5介紹兩種情況解決，當然還有其他解決實現(xiàn)方法。大家下來可以實踐以上兩種方法并掌握，靈活運用。