CSS Lists(列表) - 技术栈

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

HTML列表的类型

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

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

CSS样式列表

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

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

列表样式类型

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

css 复制代码

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

更改列表标记的位置

默认情况下，列表标记位于列表项框的外部。但是，您可以使用该list-style-position属性来指定标记或项目符号点出现在列表项边框的内部还是外部。

此属性采用值inside或outside，并且outside是默认值。如果使用该值inside，则这些行将环绕在标记下而不是缩进。

将图像用作列表标记

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

以下示例中的样式规则为无序列表中的所有项目分配一个透明的PNG图像" arrow.png"作为列表标记。

css 复制代码

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

上面的示例并非在所有浏览器中都产生相同的输出。Internet Explorer和Opera将显示比Firefox，Chrome和Safari稍高的图像标记。

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

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

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

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在一个地方的清单。

此样式规则将已排序列表项的列表标记设置为大写拉丁字母，这些字母出现在列表项的最前面：

css 复制代码

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

注：当使用速记属性，值的顺序是：list-style-type| list-style-position| list-style-image。可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的，未设置的属性会使用其默认值。

引用

菜鸟教程