HTML列表和CSS列表属性

在HTML中有两种主要类型的列表:

• 无序列表(<ul>) - 列表项用符号标记
• 有序列表(<ol>) - 列表项用数字或字母标记

CSS列表属性允许你:

• 为已排序列表设置不同的列表项标记.
• 为无序列表设置不同的列表项标记.
• 将图像设置为列表项标记.
• 给列表和列表项添加背景颜色.

不同列表项目标记

list-style-type属性指定列表项标记的类型.

下面的示例显示了一些可用的列表项标记:

注意:其中一些值用于无序列表,另一些用于有序列表.

图像作为列表项标记

list-style-image属性指定图像作为列表项标记:

设置列表项标记位置

list-style-position属性指定列表项标记(项目符号)的位置.

"list-style-position: outside;"意味着项目符号将在列表项目的外部.列表项的每一行的开始将垂直对齐,这是默认的.

• 咖啡 - 一种由烤咖啡豆制成的冲泡饮料……
• 茶
• 可口可乐

"list-style-position: inside;"意味着列表项标记将在列表项目内部. 由于它是列表项的一部分,它将是文本的一部分:

• 咖啡 - 一种由烤咖啡豆制成的冲泡饮料……
• 茶
• 可口可乐

删除默认设置

list-style-type:none属性用来删除标记/项目符号.请注意,列表还具有默认的margin和padding. 若要删除,请添加margin:0和padding:0到<ul>或<ol>:

列表 - 简写属性

list-style属性是简写属性.它用于在一个声明中设置所有列表属性:

使用简写属性时,属性值的顺序为:

• list-style-type (如果设置list-style-image属性,如果由于某种原因无法显示该图像,则显示此属性的值.)
• list-style-position (指定列表项标记应该出现在内容部分的内部还是外部.)
• list-style-image (将图像指定为列表项标记.)

如果缺少以上属性值之一,则将插入缺少属性的默认值(如果有).

给列表添加颜色

我们也可以给列表添加颜色,使它们看起来更有趣.

添加到<ol>或<ul>标记的任何内容都会影响整个列表,而添加到<li>标签的属性将影响每个列表项:

更多例子

此示例演示如何创建带有红色左边框的列表.

本示例演示如何创建无列表项标记的边框.

此示例演示CSS中所有不同的列表项标记.

全部的CSS列表属性