CSS教學：編號清單、項目符號列表的自訂風格、數字表示方式（以WordPress為例）

無論是做簡報或是撰寫報告時，為了清楚呈現出想要表達的內容，我們有時候會透過條列式的編排方式進行呈現。如果是應用在網頁內容，我們會透過「編號清單」或是「項目符號列表」的技術來編排這些條列式內容。

不過在設計網站內容的階段，由於需要透過 HTML 語法來撰寫，編排設計的自由度便受限於工具開發者所推出的有限功能，無法像在微軟文書處理工具 Office 或簡報軟體 Keynotes 等來得方便。不過實際上要是能夠深入了解 HTML 語法內容，實際能夠呈現出來的效果也可以達到讓人滿地的成果，有時候甚至比起來得固定式的電腦軟體來得更加自由，就是語法撰寫上比較麻煩些。

備註：我在兩個網站測試下面的錯誤狀況，其中一個網站可以正確變更為數字，但是另一個沒辦法，因此我無法肯定你一定會遇到同樣問題。總之，就算我們採用了正確的 HTML 語法與參數，也很可能因為外觀佈景（Theme）或是瀏覽器支援度等影響而改變呈現效果，關於這一點也只能自己多加測試，因此本文重點還是擺在文末的編號語法列表，供大家參考使用。

例如在 WordPress 中，如果要列出三種表列內容，會出現如下效果：

1. 內容一
2. 內容二
3. 內容三

語法如下：

<ol>
<li>內容一</li>
<li>內容二</li>
<li>內容三</li>
</ol>

要是我想在 1 中塞入兩條子項（使用「增加縮排」按鈕，或鍵盤上的「tab」按鍵），會變成：

1. 內容一
   1. 子項一
   2. 子項二
2. 內容二
3. 內容三

語法如下：

<ol>
<li>內容一
<ol>
<li>子項一</li>
<li>子項二</li>
</ol>
</li>
<li>內容二</li>
<li>內容三</li>
</ol>

接著我想用其他符號（例如小寫英文字母或小寫希臘字母），可以在編號清單的按鈕下拉清單中直接改選，效果如下：

1. 內容一
   1. 子項一
   2. 子項二
2. 內容二
3. 內容三

語法如下：

<ol>
<li>內容一
<ol style="list-style-type: lower-alpha;">
<li>子項一</li>
<li>子項二</li>
</ol>
</li>
<li>內容二</li>
<li>內容三</li>
</ol>

不過在 WordPress 的設計中有一個瑕疵，如果主要編號不是數字，那麼子項（有可能）沒辦法再選用預設數字，情況如下：

1. 內容一
   1. 子項一
   2. 子項二
2. 內容二
3. 內容三

語法如下：

<ol style="list-style-type: upper-alpha;">
<li>內容一
<ol style="list-style-type: upper-alpha;">
<li>子項一</li>
<li>子項二</li>
</ol>
</li>
<li>內容二</li>
<li>內容三</li>
</ol>

這時候我們可以透過手動變更 HTML 語法（文字），將子項的編號改回數字，語法如下：

<ol style="list-style-type:decimal;">

編號語法

其他編號清單、項目符號列表的可用參數列於下面，提供大家做為參考，也可以在編輯器不支援的情況下，親手挑選想用的符號，包括：

• •••：disc（預設；原點）。
• ○○○：circle（圓圈）。
• ▪▪▪：square（方塊）。
• 1、2、3：decimal（預設；數字）。
• 01、02、03：decimal-leading-zero（小數開頭的數字）。
• i、ii、iii：lower-roman（小寫羅馬數字）。
• I、II、III：upper-roman（大寫羅馬數字）。
• α、β、γ：lower-greek（小寫希臘字母）。
• a、b、c：lower-latin（小寫拉丁文字母）。
• A、B、C：upper-latin（大寫拉丁文字母）。
• Ա、Բ、Գ：armenian（亞美尼亞字母）。
• ა、ბ、გ：georgian（格魯吉亞字母）。
• a、b、c：lower-alpha（小寫英文字母）。
• A、B、C：upper-alpha（大寫英文字母）。