如何自定义有序列表中的数字？
https://stackoverflow.com/questions/10877
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
如何将有序列表中的数字左对齐？
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 的答案。
解决方案
这是我在 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 属性。
参考 列表样式类型 CSS 属性。或者，当使用计数器时，第二个参数接受列表样式类型值。例如，以下内容将使用大写罗马字：
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
其他提示
您还可以在 HTML 中指定您自己的号码 - 例如如果数字由数据库提供：
<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>
这 seq 使用类似于其他答案中给出的方法使属性可见。但不是使用 content: counter(foo), ， 我们用 content: attr(seq):
ol {
list-style: none;
}
ol > li:before {
content: attr(seq) ". ";
}
从其他答案中窃取了很多内容，但这对我来说在 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;
}
但你必须进行实验才能找到确切的解决方案。
如果通过设置在数字中添加前导零，数字会排列得更好 列表样式类型 到：
ol { list-style-type: decimal-leading-zero; }
借用并改进 马库斯·唐宁的回答. 。已在 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. */
}
有的是 类型属性 它允许您更改编号样式，但是，您无法更改数字/字母后面的句号。
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
文档说关于 list-style-position: outside
CSS1 没有指定标记框的精确位置，并且出于兼容性原因，CSS2 仍然同样不明确。为了更精确地控制标记框，请使用标记。
该页面的更上方是有关标记的内容。
一个例子是：
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
没有...只需使用 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;
}
我有。请尝试以下操作：
<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 是一个非常新的财产。
又快又脏 替代解决方案。您可以将制表字符与预格式化文本一起使用。这是一种可能性：
<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>
从概念的角度来看，其他答案更好。但是，您可以在数字左侧填充适当数量的“ ”以使它们对齐。
* 笔记：我一开始并没有意识到正在使用编号列表。我认为该列表是明确生成的。
我将在这里给出我通常不喜欢阅读的答案，但我认为，由于还有其他答案告诉您如何实现您想要的目标，因此重新思考您想要实现的目标是否真的是件好事，这可能会很好一个好主意。
首先，您应该考虑以非标准方式显示项目（使用与提供的分隔符不同的分隔符）是否是个好主意。
我不知道其中的原因，但我们假设你有充分的理由。
这里提出的实现方法包括将内容添加到标记中，主要是通过 CSS :before 伪类。此内容实际上是在修改您的 DOM 结构，向其中添加这些项目。
当您使用标准“ol”计数时，您将获得一个渲染内容，其中“li”文本可选择，但其前面的数字不可选择。也就是说，标准编号系统似乎更多的是“装饰”而不是真正的内容。如果您使用例如“：before”方法添加数字内容，则该内容将是可选的，因此，会执行不需要的复制/粘贴问题，或者屏幕阅读器的可访问性问题，该屏幕阅读器将另外读取此“新”内容到标准计数系统。
也许另一种方法是使用图像来设置数字的样式，尽管这种替代方案会带来自己的问题（禁用图像时不会显示数字，数字的文本大小不会改变，...）。
无论如何，这个答案的原因不仅仅是提出这种“图像”替代方案，而是让人们思考尝试改变有序列表的标准计数系统的后果。
此代码使编号样式与 li 内容的标题相同。
<style>
h4 {font-size: 18px}
ol.list-h4 {counter-reset: item; padding-left:27px}
ol.list-h4 > li {display: block}
ol.list-h4 > li::before {display: block; position:absolute; left:16px; top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
ol.list-h4 > li > h4 {padding-top:3px}
</style>
<ol class="list-h4">
<li>
<h4>...</h4>
<p>...</p>
</li>
<li>...</li>
</ol>
