CSS list-style-type 列表的顯示樣式

CSS list-style-type 可以用來設定 ul li 或 ol li 的項目符號，無論是 ul li 無排序項目或是 ol li 有排序項目清單都可以使用 CSS list-style-type 來修改每個項目的標示符號，例如無標示、空心圓圈、實心圓圈、大寫英文字母、小寫英文字母、數字、正方形甚至是羅馬數字，都是常見到的標示方式，換句話說 CSS list-style-type 有非常多種不同的風格可以使用。

CSS list-style-type 範例參考

<style type="text/css">
<!--
ul.A {
    list-style-type:decimal;
}
ol.B {
    list-style-type:lower-roman;
}
-->
</style>
<ul class="A">
　<li>項目一</li>
　<li>項目二</li>
</ul>
<ol class="B">
　<li>項目一</li>
　<li>項目二</li>
</ol>

以上範例呈現結果如

• 項目一
• 項目二

1. 項目一
2. 項目二

透過 list-style-type 參數的修改，將第一個 ul 標籤的項目符號由原本預設的「●」取代為數字並且有排序，接著的 ol 項目標籤原本預設是有排序的數字項目符號，修改為小寫羅馬拼音的數字寫法，且保有排序的效果，參數表整理了許多常用到的項目符號參數。

CSS list-style-type 常用參數表

參數	定義
none	不顯示符號
disc	實心圓形
circle	空心圓形
square	實心正方形
lower-alpha	小寫英文字母
upper-alpha	大寫英文字母
decimal	阿拉伯數字
decimal-leading-zero	十進位制的阿拉伯數字，前方自動補零
armenian	亞美尼亞語
lower-greek	希臘語
lower-roman	小寫羅馬數字
upper-roman	大寫羅馬數字

帶入常用參數的範例

<ul style="list-style-type:square;">
　<li>none</li>
　<li>none</li>
</ul>
<ul style="list-style-type:decimal;">
　<li>decimal</li>
　<li>decimal</li>
</ul>
<ul style="list-style-type:decimal-leading-zero;">
　<li>decimal-leading-zero</li>
　<li>decimal-leading-zero</li>
</ul>
<ul style="list-style-type:lower-alpha;">
　<li>lower-alpha</li>
　<li>lower-alpha</li>
</ul>
<ul style="list-style-type:upper-alpha;">
　<li>upper-alpha</li>
　<li>upper-alpha</li>
</ul>
<ul style="list-style-type:lower-roman;">
　<li>lower-roman</li>
　<li>lower-roman</li>
</ul>

以上範例輸出結果

• none
• none

• decimal
• decimal

• decimal-leading-zero
• decimal-leading-zero

• lower-alpha
• lower-alpha

• upper-alpha
• upper-alpha

• lower-roman
• lower-roman

範例直接將 style 寫在 <ul> 標籤內，是一種簡化的寫法，單獨處理單一網頁中多組 ul 標籤也相當好用，不過若網頁中有許多不同的 ul 項目組都需要一樣的風格，則第一個範例的寫法對於整體管理會比較便利些。