CSS 列表
无序列表
- 咖啡
- 茶
- 可口可乐
- 咖啡
- 茶
- 可口可乐
有序列表
- 咖啡
- 茶
- 可口可乐
- 咖啡
- 茶
- 可口可乐
HTML 列表和 CSS 列表属性
在 HTML 中，有两种主要的列表类型
- 无序列表（<ul>）- 列表项用项目符号标记
- 有序列表（<ol>）- 列表项用数字或字母标记
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 属性将图像指定为列表项标记
定位列表项标记
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> 标签的属性将影响单个列表项。
示例
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
结果
- 咖啡
- 茶
- 可口可乐
- 咖啡
- 茶
- 可口可乐
更多示例
带有红色左边框的自定义列表
此示例演示如何创建带有红色左边框的列表。
全宽度带边框列表
此示例演示如何创建没有项目符号的带边框列表。
所有不同的列表项标记
此示例演示 CSS 中的所有不同列表项标记。
所有 CSS 列表属性
| 属性 | 描述 |
|---|---|
| list-style | 在一个声明中设置列表的所有属性 |
| list-style-image | 将图像指定为列表项标记 |
| list-style-position | 指定列表项标记（项目符号）的位置 |
| list-style-type | 指定列表项标记的类型 |
