CSS教学：编号清单、项目符号列表的自订风格、数字表示方式（以WordPress为例）

无论是做简报或是撰写报告时，为了清楚呈现出想要表达的内容，我们有时候会透过条列式的编排方式进行呈现。如果是应用在网页内容，我们会透过「编号清单」或是「项目符号列表」的技术来编排这些条列式内容。

不过在设计网站内容的阶段，由于需要透过 HTML 语法来撰写，编排设计的自由度便受限于工具开发者所推出的有限功能，无法像在微软文书处理工具 Office 或简报软件 Keynotes 等来得方便。不过实际上要是能够深入了解 HTML 语法内容，实际能够呈现出来的效果也可以达到让人满地的成果，有时候甚至比起来得固定式的电脑软件来得更加自由，就是语法撰写上比较麻烦些。

备注：我在两个网站测试下面的错误状况，其中一个网站可以正确变更为数字，但是另一个没办法，因此我无法肯定你一定会遇到同样问题。总之，就算我们采用了正确的 HTML 语法与参数，也很可能因为外观布景（Theme）或是浏览器支持度等影响而改变呈现效果，关于这一点也只能自己多加测试，因此本文重点还是摆在文末的编号语法列表，供大家参考使用。

例如在 WordPress 中，如果要列出三种表列内容，会出现如下效果：

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

语法如下：

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

要是我想在 1 中塞入两条子项（使用「增加缩排」按钮，或键盘上的「tab」按键），会变成：

1. 内容一子项一
2. 子项二

内容二内容三

语法如下：

1. 内容一
   1. 子项一
   2. 子项二
2. 内容二
3. 内容三

接著我想用其他符号（例如小写英文字母或小写希腊字母），可以在编号清单的按钮下拉清单中直接改选，效果如下：

1. 内容一子项一
2. 子项二

内容二内容三

语法如下：

1. 内容一
   1. 子项一
   2. 子项二
2. 内容二
3. 内容三

不过在 WordPress 的设计中有一个瑕疵，如果主要编号不是数字，那么子项（有可能）没办法再选用默认数字，情况如下：

1. 内容一子项一
2. 子项二

内容二内容三

语法如下：

1. 内容一
   1. 子项一
   2. 子项二
2. 内容二
3. 内容三

这时候我们可以透过手动变更 HTML 语法（文字），将子项的编号改回数字，语法如下：

编号语法

其他编号清单、项目符号列表的可用参数列于下面，提供大家做为参考，也可以在编辑器不支持的情况下，亲手挑选想用的符号，包括：

• •••：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（大写英文字母）。