CSS 使用 float 製作 ul li 橫向水平範例一、float 與 display inline 差異
<style type="text/css">
<!--
#A ul li {
float:left;
}
#B ul li {
display:inline;
}
-->
</style>
<div id="A">
<ul>
<li>這裡是項目一</li>
<li>這裡是項目二</li>
</ul>
</div>
<div id="B">
<ul>
<li>這裡是項目一</li>
<li>這裡是項目二</li>
</ul>
</div>
以上範例輸出結果<!--
#A ul li {
float:left;
}
#B ul li {
display:inline;
}
-->
</style>
<div id="A">
<ul>
<li>這裡是項目一</li>
<li>這裡是項目二</li>
</ul>
</div>
<div id="B">
<ul>
<li>這裡是項目一</li>
<li>這裡是項目二</li>
</ul>
</div>
●這裡是項目一●這裡是項目二
這裡是項目一 這裡是項目二
由範例的輸出結果可以看到，第一行透過 float 浮動語法所製作的橫向水平效果，兩個 li 項目前方的「●」符號並未消失，且靠左連在一起，在一些瀏覽器的環境下，甚至會有符號重疊的狀況產生。第二行透過 display inline 的橫向水平效果，兩個 li 項目前的「●」符號完全消失，兩個項目間也有一個間距，看起來比較清楚些。僅管如此，也不能完全說明使用 display inline 比較好還是 float 比較好，舉例來說，使用 float 可以很容易的設定每個項目寬度，例如設定每個 li 寬度為 200px，只需要在 CSS 語法加上「width:200px;」即可，這樣的寬度設定方式，在 display inline 是沒有效果的唷！接著就來看加上寬度的 li 橫向水平效果。這裡是項目一 這裡是項目二
CSS 使用 float 製作 ul li 橫向水平範例二、替每個 li 加上寬度
<style type="text/css">
<!--
ul li {
border:1px #cccccc solid;
width: 200px;
float:left;
}
-->
</style>
<ul>
<li>這裡是項目一</li>
<li>這裡是項目二</li>
</ul>
輸出結果如<!--
ul li {
border:1px #cccccc solid;
width: 200px;
float:left;
}
-->
</style>
<ul>
<li>這裡是項目一</li>
<li>這裡是項目二</li>
</ul>
- 這裡是項目一
- 這裡是項目二
為了能夠清楚的呈現出寬度的視覺效果，我們在範例中加上了邊框（CSS border）的效果，即語法中的 border 部分，width:200px 就是設定每個 li 項目的寬度為 200px，若你需要在每個項目都加上寬度的效果，使用 float 會比 display inline 來得容易。
相關主題研究