Html 有序列表是否可以使用 css 生成看起来像 1.1、1.2、1.3（而不是 1、2、3、...）的结果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4098195/
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
Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?
提问by Richard77
Can an ordered list produce results that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with CSS? So far, using list-style-type:decimalhas produced only 1, 2, 3, not 1.1, 1.2., 1.3.
使用 CSS 的有序列表能否产生看起来像 1.1、1.2、1.3（而不是 1、2、3...）的结果？到目前为止， usinglist-style-type:decimal只产生了 1, 2, 3，而不是 1.1, 1.2., 1.3。
回答by Gumbo
You can use countersto do so:
您可以使用计数器来执行此操作：
The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.
OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, ".") " "; counter-increment: item }
以下样式表将嵌套列表项编号为“1”、“1.1”、“1.1.1”等。
OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, ".") " "; counter-increment: item }
Example
例子
ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }<ol>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>See Nested counters and scopefor more information.
有关更多信息，请参阅嵌套计数器和范围。
回答by Jakub Jirutka
None of solutions on this page works correctly and universally for all levels and long (wrapped) paragraphs. It's really tricky to achieve a consistent indentation due to variable size of marker (1., 1.2, 1.10, 1.10.5, …); it can't be just “faked,” not even with a precomputed margin/padding for each possible indentation level.
此页面上的所有解决方案均不适用于所有级别和长（换行）段落。由于标记的可变大小（1., 1.2, 1.10, 1.10.5, ...），实现一致的缩进真的很棘手；它不能只是“伪造”，甚至不能为每个可能的缩进级别预先计算边距/填充。
I finally figured out a solution that actually worksand doesn't need any JavaScript.
我终于找到了一个真正有效并且不需要任何 JavaScript的解决方案。
It's tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.
它在 Firefox 32、Chromium 37、IE 9 和 Android 浏览器上进行了测试。不适用于 IE 7 及更早版本。
CSS:
CSS：
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
Example:
例子：
回答by Saul Fautley
The chosen answer is a great start, but it essentially forces list-style-position: inside;styling on the list items, making wrapped text hard to read. Here's a simple workaround that also gives control over the margin between the number and text, and right-aligns the number as per the default behaviour.
选择的答案是一个很好的开始，但它本质上会强制list-style-position: inside;对列表项进行样式设置，使包装的文本难以阅读。这是一个简单的解决方法，它还可以控制数字和文本之间的边距，并根据默认行为右对齐数字。
ol {
counter-reset: item;
}
ol li {
display: block;
position: relative;
}
ol li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
JSFiddle:http://jsfiddle.net/3J4Bu/
JSFiddle：http : //jsfiddle.net/3J4Bu/
回答by chelder
The solutions posted here did not work well for me, so I did a mixture of the ones of this question and the following question: Is it possible to create multi-level ordered list in HTML?
这里发布的解决方案对我来说效果不佳，所以我混合了这个问题和以下问题：是否可以在 HTML 中创建多级有序列表？
/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */
Result:
结果：
Note: the screenshot, if you wish to see the source code or whatever is from this post: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html
注意：截图，如果你想查看源代码或来自这篇文章的任何内容：http: //estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html
回答by kennytm
Note: Use CSS countersto create nested numbering in a modern browser. See the accepted answer. The following is for historical interest only.
注意：使用 CSS在现代浏览器中创建嵌套编号。请参阅已接受的答案。以下内容仅供历史兴趣。counters
If the browser supports contentand counter,
如果浏览器支持content和counter，
.foo {
counter-reset: foo;
}
.foo li {
list-style-type: none;
}
.foo li::before {
counter-increment: foo;
content: "1." counter(foo) " ";
}<ol class="foo">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ol>回答by KingRider
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Sandro Alvares - KingRider">
</head>
<body>
<style type="text/css">
li.title {
font-size: 20px;
font-weight: lighter;
padding: 15px;
counter-increment: ordem;
}
.foo {
counter-reset: foo;
padding-left: 15px;
}
.foo li {
list-style-type: none;
}
.foo li:before {
counter-increment: foo;
content: counter(ordem) "." counter(foo) " ";
}
</style>
<ol>
<li class="title">TITLE ONE</li>
<ol class="foo">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="title">TITLE TWO</li>
<ol class="foo">
<li>text 2 one</li>
<li>text 2 two</li>
<li>text 2 three</li>
<li>text 2 four</li>
</ol>
<li class="title">TITLE THREE</li>
<ol class="foo">
<li>text 3 one</li>
<li>text 3 two</li>
<li>text 3 three</li>
<li>text 3 four</li>
</ol>
</ol>
</body>
</html>
回答by robertad
I have some problem when there are two lists and second one is inside DIV Second list should start at 1. not 2.1
当有两个列表并且第二个在 DIV 中时，我遇到了一些问题 第二个列表应该从 1 开始，而不是 2.1
<ol>
<li>lorem</li>
<li>lorem ipsum</li>
</ol>
<div>
<ol>
<li>lorem (should be 1.)</li>
<li>lorem ipsum ( should be 2.)</li>
</ol>
</div>
http://jsfiddle.net/3J4Bu/364/
http://jsfiddle.net/3J4Bu/364/
EDIT:I solved the problem by this http://jsfiddle.net/hy5f6161/
编辑：我通过这个http://jsfiddle.net/hy5f6161/解决了这个问题
回答by tyrion
In the near future you may be able to use the ::markerpsuedo-elementto achieve the same result as other solutions in just one line of code.
在不久的将来，您可能能够使用::marker伪元素在一行代码中实现与其他解决方案相同的结果。
Remember to check the Browser Compatibility Tableas this is still an experimental technology. At the moment of writing only Firefox and Firefox for Android, starting from version 68, support this.
请记住检查浏览器兼容性表，因为这仍然是一项实验性技术。目前只支持 Firefox 和 Firefox for Android，从 68 版开始支持这个。
Here is a snippet that will render correctly if tried in a compatible browser:
这是一个片段，如果在兼容的浏览器中尝试，它将正确呈现：
::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }<ol>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>You may also want to check out this great article by smashingmagazineon the topic.
您可能还想通过 smashingmagazine查看有关该主题的这篇很棒的文章。
回答by benjarlett
I needed to add this to the solution posted in 12 as I was using a list with a mixture of ordered list and unordered lists components. content: no-close-quote seems like an odd thing to add I know, but it works...
我需要将此添加到 12 中发布的解决方案中，因为我使用的是一个混合了有序列表和无序列表组件的列表。内容：没有关闭引用似乎是一件奇怪的事情，我知道，但它有效......
ol ul li:before {
content: no-close-quote;
counter-increment: none;
display: list-item;
margin-right: 100%;
position: absolute;
right: 10px;
}
回答by willy wonka
The following worked for me:
以下对我有用：
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ") ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") ") ";
}
Look at: http://jsfiddle.net/rLebz84u/2/
看：http: //jsfiddle.net/rLebz84u/2/
or this one http://jsfiddle.net/rLebz84u/3/with more and justified text
或者这个http://jsfiddle.net/rLebz84u/3/带有更多和合理的文本
