WEBTECH 網頁設計教學站
利用 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 列表開頭顯示符號》篇的內容。

延伸閱讀

連絡我們