CSS 使用 float 製作 ul li 橫向水平

不久之前介紹了一篇「CSS ul li 橫向水平」的設計方式,採用的技巧是 CSS display inline 水平呈現語法,算是比較容易的一種標準做法,本篇要介紹另一種 CSS 製作 ul li 橫向水平的技巧,使用到 CSS 內建的浮動(float)特性,讓每個 li 項目水平浮動排列,雖然都可以做到橫向水平的效果,但使用 float 的呈現效果與 display inline 有一點點差異,看範例比較清楚。

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>
以上範例輸出結果
●這裡是項目一●這裡是項目二
 這裡是項目一 這裡是項目二
由範例的輸出結果可以看到,第一行透過 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>
輸出結果如
  • 這裡是項目一
  • 這裡是項目二


為了能夠清楚的呈現出寬度的視覺效果,我們在範例中加上了邊框(CSS border)的效果,即語法中的 border 部分,width:200px 就是設定每個 li 項目的寬度為 200px,若你需要在每個項目都加上寬度的效果,使用 float 會比 display inline 來得容易。

相關主題研究
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012