Html 如何自定义有序列表中的数字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can you customize the numbers in an ordered list?
提问by grom
How can I left-align the numbers in an ordered list?
如何左对齐有序列表中的数字？
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
Change the character after the number in an ordered list?
更改有序列表中数字后的字符？
1) an item
Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.
还有一个 CSS 解决方案可以将数字更改为字母/罗马列表，而不是使用 ol 元素上的 type 属性。
I am mostly interested in answers that work on Firefox 3.
我最感兴趣的是适用于 Firefox 3 的答案。
采纳答案by grom
This is the solution I have working in Firefox 3, Opera and Google Chrome. The list still displays in IE7 (but without the close bracket and left align numbers):
这是我在 Firefox 3、Opera 和 Google Chrome 中使用的解决方案。该列表仍然显示在 IE7 中（但没有右括号和左对齐数字）：
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;
}<ol>
<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<br>Items</li>
<li>Ten<br>Items</li>
</ol>EDIT:Included multiple line fix by strager
编辑：包括 strager 的多行修复
Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.
还有一个 CSS 解决方案可以将数字更改为字母/罗马列表，而不是使用 ol 元素上的 type 属性。
Refer to list-style-typeCSS property. Or when using counters the second argument accepts a list-style-type value. For example the following will use upper roman:
请参阅list-style-typeCSS 属性。或者当使用计数器时，第二个参数接受一个列表样式类型的值。例如，以下将使用高体罗马：
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
回答by Marcus Downing
The CSS for styling lists is here, but is basically:
样式列表的 CSS 在这里，但基本上是：
li {
list-style-type: decimal;
list-style-position: inside;
}
However, the specific layout you're after can probably only be achieved by delving into the innards of the layout with something like this(note that I haven't actually tried it):
但是，具体的布局你可以以后大概只能通过钻研的东西，如实现到布局的内脏这种（请注意，我还没有真正尝试过）：
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
回答by z0r
You can also specify your own numbers in the HTML - e.g. if the numbers are being provided by a database:
您还可以在 HTML 中指定您自己的数字 - 例如，如果数字由数据库提供：
ol {
list-style: none;
}
ol>li:before {
content: attr(seq) ". ";
}<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>The seqattribute is made visible using a method similar to that given in other answers. But instead of using content: counter(foo), we use content: attr(seq).
seq使用与其他答案中给出的方法类似的方法使该属性可见。但是content: counter(foo)我们没有使用，而是使用content: attr(seq).
回答by Steve Perks
Stole a lot of this from other answers, but this is working in FF3 for me. It has upper-roman, uniform indenting, a close bracket.
从其他答案中窃取了很多内容，但这对我来说在 FF3 中有效。它有upper-roman，统一缩进，一个右括号。
<!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>
<title> new document </title>
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
-->
</style>
</head>
<body>
<ol>
<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>
</ol>
</body>
</html>
回答by Marcus Downing
I suggest playing with the :before attribute and seeing what you can achieve with it. It will mean your code really is limited to nice new browsers, and excludes the (annoyingly large) section of the market still using rubbish old browsers,
我建议使用 :before 属性，看看你能用它实现什么。这将意味着您的代码确实仅限于不错的新浏览器，并且排除了仍在使用垃圾旧浏览器的（令人讨厌的大）市场部分，
Something like the following, which forces a fixed with on the items. Yes, I know it's less elegant to have to choose the width yourself, but using CSS for your layout is like undercover police work: however good your motives, it always gets messy.
类似于以下内容，这会强制对项目进行固定。是的，我知道必须自己选择宽度不太优雅，但是在布局中使用 CSS 就像卧底警察的工作：无论你的动机多么好，它总是变得凌乱。
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
But you're going to have to experiment to find the exact solution.
但是您将不得不进行实验以找到确切的解决方案。
回答by Peter Hilton
The numbers line up better if you add leading-zeroes to the numbers, by setting list-style-typeto:
如果通过将list-style-type设置为向数字添加前导零，数字会更好地排列：
ol { list-style-type: decimal-leading-zero; }
回答by strager
Borrowed and improved Marcus Downing's answer. Tested and works in Firefox 3 and Opera 9. Supports multiple lines, too.
借用并改进了Marcus Downing 的回答。在 Firefox 3 和 Opera 9 中测试和工作。也支持多行。
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. */
}
回答by GateKiller
There is the Type attributewhich allows you to change the numbering style, however, you cannot change the full stop after the number/letter.
有类型属性允许您更改编号样式，但是，您不能更改数字/字母后的句号。
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
回答by Stephen Denne
The docs say regarding list-style-position: outside
文档说关于 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.
CSS1 没有指定标记框的精确位置，出于兼容性的原因，CSS2 仍然同样不明确。要更精确地控制标记框，请使用标记。
Further up that page is the stuff about markers.
该页面的进一步是关于标记的内容。
One example is:
一个例子是：
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
回答by William Entriken
Nope... just use a DL:
不......只需使用DL：
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;
}
