利用 CSS 設計 ul li 橫向水平顯示

許多人都在問要如何利用 CSS 設計 ul li 橫向水平顯示？其實這不算是個很困難的技術，CSS 本身就有幾個屬性可以做出這種效果，包含 float 與 display 的屬性，float 就是浮動效果，而 display 則是控制顯示的屬性，這兩種屬性可以做出 ul li 橫向水平顯示的效果，可是有一點點的差異，我們這裡馬上來看個簡單的範例就知道了。

範例一、利用 CSS 的 float 屬性製作ul li 橫向水平顯示效果
<style>
#Exa0 li{
border:1px #ccc solid;
}
#Exa1 li{
float:left;
margin-right:25px;
margin-top:30px;
border:1px #ccc solid;
}
</style>
<ul id="Exa0">
<li>豬肉</li>
<li>雞肉</li>
<li>牛肉</li>
</ul>
<ul id="Exa1">
<li>豬肉</li>
<li>雞肉</li>
<li>牛肉</li>
</ul>
範例的效果
  • 豬肉
  • 雞肉
  • 牛肉
  • 豬肉
  • 雞肉
  • 牛肉
我們在範例一中準備了兩組 ul li 標籤，第一組（id="Exa0"）並未使用 CSS 的 float 屬性，所以項目符號是預設的由上而下排列，而第二組（id=""Exa1）則使用了 CSS 的 float 屬性，讓每一組 <li></li> 項目都變成水平排列。

範例相關語法參考解說
  1. CSS float 浮動
  2. CSS margin 邊界使用介紹範例教學
  3. CSS border 邊框設計
範例二、利用 CSS 的 display 屬性製作ul li 橫向水平顯示效果
<style>
#Exa2 li{
display:inline;
border:1px #ccc solid;
margin-right:25px;
}
</style>
<ul id="Exa2">
<li>豬肉</li>
<li>雞肉</li>
<li>牛肉</li>
</ul>
範例的效果
  • 豬肉
  • 雞肉
  • 牛肉
範例二利用的是 CSS 的 display:inline 效果，讓每個項目變成水平排列，跟範例一的效果類似，不過 display:inline; 會自動讓每個項目前面的黑點消失，這是很大的差別，關於顯示設定請參閱《CSS display 屬性用法介紹 display:block 與 display:inline》解說。

雖然經過兩個範例顯示出 float 與 display:inline 產生的 ul li 橫向水平顯示差異，不過要讓項目前面的符號消失，甚至改用其它符號顯示也不一定要用 display 屬性，請參閱《CSS list-style-type 列表開頭顯示符號》篇的內容。

延伸閱讀
© Copyright webtech.tw Since 2010