CSS列表
CSS列表
CSS 列表
HTML 列表和 CSS 列表属性
在 HTML 中，列表主要有两种类型：
- 无序列表（
<ul>）- 列表项用的是项目符号标记 - 有序列表（
<ol>）- 列表项用的是数字或字母标记
CSS 列表属性使您可以：
- 为有序列表设置不同的列表项标记
- 为无序列表设置不同的列表项标记
- 将图像设置为列表项标记
- 为列表和列表项添加背景色
不同的列表项目标记
list-style-type 属性指定列表项标记的类型。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<p>无序列表示例：</p>
<ul class="a">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="b">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<p>有序列表示例：</p>
<ol class="c">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="d">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
</body>
</html>
注意：有些值用于无序列表，有些值用于有序列表。
图像作为列表项标记
list-style-image 属性将图像指定为列表项标记：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
定位列表项标记
list-style-position 属性指定列表项标记（项目符号）的位置。
- “list-style-position: outside;” 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的：
- “list-style-position: inside;” 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>list-style-position 属性</h1>
<h2>list-style-position: outside (default):</h2>
<ul class="a">
<li>咖啡 - 一种由烘焙咖啡豆制成的冲泡饮料，咖啡豆是咖啡树浆果的种子</li>
<li>茶 - 一种芳香饮料，通常将热水或沸水倒在茶树（Camellia sinensis）的腌制叶子上，这是一种原产于亚洲的常绿灌木（灌木）</li>
<li>可口可乐 - 可口可乐公司生产的碳酸软饮料。 这种饮料的名字指的是它的两种原始成分，即可乐果（咖啡因的来源）和古柯叶</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>咖啡 - 一种由烘焙咖啡豆制成的冲泡饮料，咖啡豆是咖啡树浆果的种子</li>
<li>茶 - 一种芳香饮料，通常将热水或沸水倒在茶树（Camellia sinensis）的腌制叶子上，这是一种原产于亚洲的常绿灌木（灌木）</li>
<li>可口可乐 - 可口可乐公司生产的碳酸软饮料。 这种饮料的名字指的是它的两种原始成分，即可乐果（咖啡因的来源）和古柯叶</li>
</ul>
</body>
</html>
删除默认设置
list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 ：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>默认列表：</p>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<p>删除项目符号、边距和填充：</p>
<ul class="demo">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
列表 - 简写属性
list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性。
在使用简写属性时，属性值的顺序为：
- list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
- list-style-position（指定列表项标记应显示在内容流的内部还是外部）
- list-style-image（将图像指定为列表项标记）
如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
设置列表的颜色样式
可以使用颜色设置列表样式，使它们看起来更有趣。
添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表，而添加到 <li> 标记的属性将影响各个列表项：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
列表 CSS 案例
居中
水平居中，设置 li 的 text-align: center
垂直居中，设置 a 的 line-height 与 li 的高度一样。
本文由作者按照 CC BY 4.0 进行授权