CSS 列表

用于控制列表项标记的表示的列表属性。

HTML 列表的类型

HTML 中有三种不同类型的列表：

• 无序列表 - 项目列表，其中每个列表项都标有项目符号。
• 有序列表 - 项目列表，其中每个列表项都标有数字。
• 定义列表 - 项目列表，包含每个项目的描述。

要了解有关列表的更多信息，请查看 HTML 列表中的教程。

使用 CSS 设置列表

CSS 提供了几种属性，用于样式化最常用的无序和有序列表。这些 CSS 列表属性通常允许你：

• 控制标记的形状或外观。
• 指定标记的图像而不是项目符号或数字。
• 设置标记与列表中文本之间的距离。
• 指定标记或项目符号是显示在包含无序列表项还是有序列表项的框内部或外部。

在下一节中，我们将讨论可用于样式列表的属性。

列表样式类型

默认情况下，有序列表中的项目用阿拉伯数字（1,2,3 等）编号，而在无序列表中，项目用圆形项目符号标记。但是，你可以使用 list-style-type 属性将此默认列表标记类型更改为任何其他类型，如圆形、方形、罗马数字、拉丁字母等。

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

改变列表标记的位置

默认情况下，列表标记位于列表项的框之外。但是，你可以使用 list-style-position 属性指定标记或项目符号点是显示在列表项的主要块框内部还是外部。

此属性取值 inside 或者 outside ，其中默认选项是 outside。

ul.in li {
    list-style-position: inside;
}
ul.out li {
    list-style-position: outside;
}

使用图片作为列表标记

你还可以使用 list-style-image 属性将图像设置为列表标记。

以下示例中的样式规则将透明 PNG 图像 arrow.png 指定为无序列表中所有项目的列表标记。

ul li {
    list-style-image: url("arrow.png");
}

上面的示例并未在所有浏览器中生成相同的输出。Internet Explorer 和 Opera 将显示略高于 Firefox，Chrome 和 Safari 的图像标记。请参阅下文，了解此问题的跨浏览器解决方案。

图像标记的跨浏览器解决方案

使用 list-style-image 属性将图像用作项目符号时，项目符号不会在浏览器中准确排列。解决方法是，你可以通过 background-image CSS 属性正确对齐项目符号图像。首先，将列表设置为没有项目符号。然后，为列表元素定义非重复的背景图像。

以下示例在所有浏览器中均等地显示图像标记：

ul {
    list-style-type: none;
}
ul li {
    background-image: url("arrow.png");
    background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

列表样式的速记属性

list-style 属性是在一个地方定义列表的所有三个属性的简写属性 list-style-type ， list-style-image 以及 list-style-position。

此样式规则将有序列表项的列表标记设置为出现在列表项主要块框内的大写拉丁字母：

ol {
    list-style: upper-latin inside;
}

注意： 使用速记属性时，值的顺序为： list-style-type | list-style-position | list-style-image 。如果其中一个值缺失，则无关紧要，只要其余值按指定顺序排列即可。