关于html：如何定制有序列表中的数字？

How can you customize the numbers in an ordered list?

如何在有序列表中将数字左对齐？

1
2
3
4

1. an item
// skip some items for brevity
9. another item
10. notice the 1 is under the 9, and the item contents also line up

在有序列表中的数字后面更改字符？

1	1) an item

还有一种CSS解决方案，可以从数字更改为字母/罗马列表，而不是在ol元素上使用type属性。

我对Firefox 3上的答案最感兴趣。

这是我在Firefox 3，Opera和Google Chrome中使用的解决方案。该列表仍显示在IE7中(但没有右括号和左对齐数字)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li::before {
display: inline-block;
content: counter(item)")";
counter-increment: item;
width: 2em;
margin-left: -2em;
}

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

<li>
One
</li>

<li>
Two
</li>

<li>
Three
</li>

<li>
Four
</li>

<li>
Five
</li>

<li>
Six
</li>

<li>
Seven
</li>

<li>
Eight
</li>

<li>
NineItems
</li>

<li>
TenItems
</li>

编辑：包括由斯特拉格的多行修复

Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.

请参阅list-style-type CSS属性。或在使用计数器时，第二个参数接受列表样式类型的值。例如，以下将使用大写罗马字：

1
2
3
4

li::before {
content: counter(item, upper-roman)")";
counter-increment: item;
/* ... */

样式列表的CSS在这里，但是基本上是：

1
2
3
4

li {
list-style-type: decimal;
list-style-position: inside;
}

但是，您所追求的特定布局可能只能通过使用如下所示的内容深入研究布局的内部来实现(请注意，我实际上并未尝试过)：

1
2
3

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item)")"; counter-increment: item }

您还可以在HTML中指定自己的数字-例如如果数字是由数据库提供的：

1
2
3
4
5
6
7

ol {
list-style: none;
}

ol>li:before {
content: attr(seq)".";
}

1
2
3
4
5
6
7
8

<li seq="1">Item one
</li>

<li seq="20">Item twenty
</li>

<li seq="300">Item three hundred
</li>

使用类似于其他答案中给出的方法，可以使seq属性可见。但是我们使用content: attr(seq)而不是使用content: counter(foo)。

带有更多样式的CodePen演示

从其他答案中偷了很多，但这对我来说在FF3中有效。它具有upper-roman，一致的缩进和尖括号。

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
new document
<style type="text/css">

</style>
</head>

<body>

<li>
One
</li>

<li>
Two
</li>

<li>
Three
</li>

<li>
Four
</li>

<li>
Five
</li>

<li>
Six
</li>

<li>
Seven
</li>

<li>
Eight
</li>

<li>
Nine
</li>

<li>
Ten
</li>

</body>
</html>

HTML5：使用value属性(无需CSS)

现代浏览器将解释value属性，并按您期望的方式显示它。请参阅MDN文档。

1
2
3
4
5
6
7
8

<li value="3">This is item three.
</li>

<li value="50">This is item fifty.
</li>

<li value="100">This is item one hundred.
</li>

还可以查看有关MDN的文章，尤其是start和属性的文档。

我建议您使用：before属性，并查看可以实现的目标。这意味着您的代码实际上仅限于新的浏览器，并且排除了仍然使用垃圾旧浏览器的市场(令人讨厌的)部分，

类似于以下内容的东西，会在项目上强制带有。是的，我知道必须自己选择宽度并不那么优雅，但是在布局中使用CSS就像是卧底警察工作：无论动机如何，总会变得混乱。

1
2
3
4
5
6

li:before {
content: counter(item)")";
counter-increment: item;
display: marker;
width: 2em;
}

但是您将不得不尝试找到确切的解决方案。

如果通过将list-style-type设置为：在数字前添加零，则数字排列会更好：

1	ol { list-style-type: decimal-leading-zero; }

借用并改进了Marcus Downing的答案。经过测试并在Firefox 3和Opera 9中运行。也支持多行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}

li {
display: block;
margin-left: 3.5em; /* Change with margin-left on li:before. Must be -li:before::margin-left + li:before::padding-right. (Causes indention for other lines.) */
}

li:before {
content: counter(item)")"; /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
counter-increment: item;
display: inline-block;
text-align: right;
width: 3em; /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example). Will have to beef up if using roman. */
padding-right: 0.5em;
margin-left: -3.5em; /* See li comments. */
}

有一个Type属性，它允许您更改编号样式，但是，不能在数字/字母后更改句号。

1
2
3
4
5
6
7
8

<li>
Turn left on Maple Street
</li>

<li>
Turn right on Clover Court
</li>

不...使用DL：

1
2
3
4
5
6
7
8
9
10
11
12

dl { overflow:hidden; }
dt {
float:left;
clear: left;
width:4em; /* adjust the width; make sure the total of both is 100% */
text-align: right
}
dd {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
margin: 0 0.5em;
}

文档说关于list-style-position : outside

CSS1 did not specify the precise location of the marker box and for reasons of compatibility, CSS2 remains equally ambiguous. For more precise control of marker boxes, please use markers.

在该页面的后面是有关标记的内容。

一个例子是：

1
2
3
4
5
6
7

LI:before {
display: marker;
content:"(" counter(counter)")";
counter-increment: counter;
width: 6em;
text-align: center;
}

快速而肮脏的替代解决方案。您可以将制表符与预格式化的文本一起使用。这是一种可能性：

1
2
3
4
5
6
7
8

和您的html：

1
2
3
4
5
6
7
8
9
10

<li>
an item
</li>

<li>
another item
</li>

...

请注意，li标记和文本开头之间的空格是制表符(按记事本中的Tab键可得到的内容)。

如果需要支持较旧的浏览器，则可以执行以下操作：

1
2
3
4
5
6
7
8
9
10

一个项目

另一个项目

...

从概念的角度来看，其他答案更好。但是，您只需在数字的左上垫上适当的''就可以使它们对齐。

*注意：起初我没有意识到正在使用编号列表。我认为该列表已明确生成。

我会在这里给出我通常不喜欢阅读的答案，但是我认为，由于还有其他答案告诉您如何实现自己想要的东西，因此重新考虑一下您想达到的目标是否真的很不错。一个好主意。

首先，您应该考虑以非标准的方式显示项目，并且分隔符与所提供的字符不同，是否是一个好主意。

我不知道原因，但让我们假设您有充分的理由。

这里提出的实现方式包括在标记中添加内容，主要是通过CSS：before伪类。该内容实际上是在修改您的DOM结构，并将这些项目添加到其中。

当使用标准的" ol"计数时，将具有一个呈现内容，在该呈现内容中可以选择" li"文本，但不能选择其前面的数字。也就是说，标准编号系统似乎比实际内容更具"装饰性"。如果您使用例如"：before"方法添加数字内容，则该内容将是可选的，并且由于此原因，屏幕阅读器将发生不希望的vopy / paste问题或可访问性问题，这些阅读器还将读取此"新"内容到标准计算系统。

也许另一种方法是使用图像设置数字样式，尽管这种选择会带来自己的问题(禁用图像时数字不会显示，数字的文字大小不会改变，...)。

无论如何，这个答案的原因不仅在于提出这种"图像"替代方案，还在于使人们思考尝试更改有序列表的标准计数系统的后果。

此代码使编号样式与li内容的标题相同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

我有请尝试以下操作：

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<html>
<head>
<style type='text/css'>

ol { counter-reset: item; }

li { display: block; }

li:before { content: counter(item)")"; counter-increment: item;
display: inline-block; width: 50px; }

</style>
</head>
<body>

<li>
Something
</li>

<li>
Something
</li>

<li>
Something
</li>

<li>
Something
</li>

<li>
Something
</li>

<li>
Something
</li>

<li>
Something
</li>

<li>
Something
</li>

<li>
Something
</li>

<li>
Something
</li>

<li>
Something
</li>

<li>
Something
</li>

</body>

问题是，这绝对不能在较旧的或不太兼容的浏览器上运行：display: inline-block是一个非常新的属性。