如何定制有序列表中的数字？
时间：2020-03-05 18:39:35 来源:igfitidea点击:
如何在有序列表中将数字左对齐？
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上使用的答案。
解决方案
回答
样式列表的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 }
回答
有一个Type属性，它允许我们更改编号样式，但是，我们不能在数字/字母后更改句号。
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
回答
我建议我们使用：before属性，看看我们可以通过它实现什么。这将意味着代码实际上仅限于新的浏览器，并且排除了仍然使用垃圾旧浏览器的市场(令人讨厌的)部分，
类似于以下内容的东西，会在项目上强制带有。是的，我知道必须自己选择宽度并不那么优雅，但是在布局中使用CSS就像是卧底警察工作：尽管动机不错，但总会变得混乱。
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
但是我们将不得不尝试找到确切的解决方案。
回答
如果通过将list-style-type设置为：将前导零添加到数字，则数字排列会更好：
ol { list-style-type: decimal-leading-zero; }
回答
这是我在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>
编辑：包括由斯特拉格的多行修复
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属性。或者在使用计数器时，第二个参数接受列表样式类型的值。例如，以下将使用大写罗马字：
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
回答
文档说到" list-style-position"：在外面
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.
该页面的后面是有关标记的内容。
一个例子是：
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
回答
我有请尝试以下方法：
<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>
<ol>
<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>
</ol>
</body>
问题在于，这绝对不能在较旧或者不太兼容的浏览器上运行：display：inline-block是一个非常新的属性。
回答
从其他答案中偷了很多，但这对我来说在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>
回答
借用并改进了马库斯·唐宁的答案。经过测试并在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. */
}
回答
快速而肮脏的替代解决方案。我们可以将制表符与预格式化的文本一起使用。这是一种可能性：
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>
和html：
<ol> <li> an item</li> <li> another item</li> ... </ol>
请注意，" li"标签和文本开头之间的空格是制表符(按记事本中的tab键时得到的内容)。
如果需要支持较旧的浏览器，则可以执行以下操作：
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>
