CSS 列表

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

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

关于列表的更多内容请参考 HTML 列表教程。

CSS 列表属性允许您：

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

不同的列表项标记

list-style-type 属性指定列表的项目符号的类型。

以下示例显示了一些可用的列表项标记：

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

图像作为列表项标记

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

ul {
  list-style-image: url("sqpurple.gif");
}

定位列表项标记

list-style-position 属性指定列表项目符号是在内容流的内部还是外部。

可选值：

• outside: 项目符号在内容流之外，列表项的内容都垂直对齐。
• inside: 项目符号在内容流内部，列表项只有开头垂直对其，换行的话不会缩进。

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

删除默认的项目符号

使用 list-style-type:none 属性删除项目符号。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

列表 - 速记属性

list-style 属性简写属性。使用它在一个属性中就能设置所有列表属性：

ul {
  list-style: square inside url("sqpurple.gif");
}

简写属性值的顺序是：

• list-style-type （如果指定了 list-style-image，当图片无法显示时会显示该属性的值）
• list-style-position （指定列表项标记应该出现在内容流内部还是外部）
• list-style-image （指定图像作为列表项标记）

所有 CSS 列表属性