gro*_*rom 99 html css html-lists roman-numerals
如何在有序列表中左对齐数字？
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) an item
还有一个CSS解决方案,可以从数字更改为字母/罗马列表,而不是使用ol元素上的type属性.
我最感兴趣的是适用于Firefox 3的答案.
gro*_*rom 96
这是我在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>编辑:由strager包含多行修复
还有一个CSS解决方案,可以从数字更改为字母/罗马列表,而不是使用ol元素上的type属性.
请参阅list-style-type CSS属性.或者在使用计数器时,第二个参数接受list-style-type值.例如,以下将使用上罗马:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
Mar*_*ing 27
样式列表的CSS在这里,但基本上是:
li {
list-style-type: decimal;
list-style-position: inside;
}
但是,你可能只能通过钻研的东西,如布局的内部结构来实现后是具体布局这个(请注意,我还没有真正尝试过):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Fli*_*imm 14
value属性（不需要 CSS）现代浏览器将解释该value属性并按您的预期显示它。请参阅MDN 文档。
<ol>
<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>
</ol>另请查看MDN上的<ol>文章，尤其是startand 属性的文档。
z0r*_*z0r 10
您还可以在HTML中指定自己的数字 - 例如,如果数字由数据库提供:
ol {
list-style: none;
}
ol>li:before {
content: attr(seq) ". ";
}seq使用类似于其他答案中给出的方法使该属性可见.但content: counter(foo)我们不使用,而是使用content: attr(seq):
<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>从其他答案中偷了很多这个,但这对我来说在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>
我建议使用:before属性,看看你能用它实现的目标.这将意味着你的代码确实是有限的,以漂亮的新的浏览器,并排除市场仍然使用旧的垃圾浏览器(烦人大)部分,
类似下面的内容,强制固定在项目上.是的,我知道这是那么优雅有自己选择的宽度,但使用CSS布局就像是卧底警察的工作:但是好你的动机,它总是会混乱.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
但是你将不得不尝试找到确切的解决方案.
如果通过将list-style-type设置为:向数字添加前导零,则数字排列更好:
ol { list-style-type: decimal-leading-zero; }