CSS ul li 橫向水平

我們常常會在文章中使用到 ul li 項目標籤，像本篇文章的＂相關主題研究＂就是使用 HTML ul li 項目標籤所製作，而 ul li 預設的呈現效果是垂直排列，若要修改為橫向水平排列必須使用 CSS 的 display inline 的語法，此方式在所有主流的瀏覽器都支援，為了能夠清楚的看出程式的運作效果，以下分為 CSS 的 display inline 與 ul li 兩個部分來解說，然後將兩種語法結合在一起，就能看到 ul li 橫向水平的呈現效果。

CSS display inline 語法

範例中 #B 目的，只是要控制下方第二個 DIV 區塊（<div id="B"></div>）中的 ul li 標籤，如果不寫 #B 的話，則整個網頁中的所有 ul li 標籤都會依照 CSS 所下的 display inline 語法指令，呈現橫向水平的排列效果，詳細請參閱：CSS display inline。

HTML ul li 項目標籤

<div id="A">
<b>預設風格</b>
<ul>
　<li>這裡是項目一</li>
　<li>這裡是項目二</li>
</ul>
</div>
<div id="B">
<b>橫向水平呈現</b>
<ul>
　<li>這裡是項目一</li>
　<li>這裡是項目二</li>
</ul>
</div>

這個部分準備了兩個大的 DIV 區塊，分別為 <div id="A"> 與 <div id="B">，其中 A 區塊用來呈現未經 display inline 修改的 ul li 項目標籤預設風貌，B 區塊則用來顯示經過 display inline 修改的橫向水平呈現效果，ul li 的標準用法請參閱：HTML ul li 項目標籤。

以上兩段語法結合在一起，寫在同一個 HTML 檔案即可，呈現結果如下

預設風格
　●這裡是項目一
　●這裡是項目二
橫向水平呈現
　這裡是項目一　這裡是項目二

由呈現結果可以發現 ul li 在垂直呈現時所預設的 ● 符號，經過 display inline 的修改為橫向水平呈現之後就消失了，這樣的特性可以讓我們更容易的將項目符號做成各式各樣美觀的選單，例如為每個 li 加上邊框（border）、加上超連結、甚至是加上背景圖片等。

相關主題研究