list-style-type:decimal
只能得到1、2、3,而不能得到1.1、1.2、1.3。list-style-type:decimal
只能得到1、2、3,而不能得到1.1、1.2、1.3。您可以使用counters来实现:
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 }
例子
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>
请参阅嵌套计数器和作用域以获取更多信息。
li:before
的规则中添加一个点来修复:content: counters(item, ".")". ";
- Mr. Lance E Sloan我终于找到了一个解决方案,它实际上是有效的,并且不需要任何JavaScript。
已在Firefox 32、Chromium 37、IE 9和Android浏览器上进行了测试。在IE 7及以前的版本上无效。
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, ".") " ";
}
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li li {
margin: 0;
}
li li:before {
content: counters(item, ".") " ";
}
<ol>
<li>Lorem ipsum.</li>
<li>Excepteur sint occaecat cupidatat non proident:
<ol>
<li>sunt in culpa qui officia,</li>
<li>deserunt mollit anim id est laborum.</li>
</ol>
</li>
<li>Ut enim ad minim veniam.
<ol>
<li>Quis nostrud exercitation.</li>
<li>Ullamco laboris nisi ut.
<ol>
<li>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
</ol>
</li>
</ol>
</li>
<li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi.</li>
</ol>
ol > li:before
中添加了 white-space: nowrap;
以防止数字换行。 - Maximlist-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/
ol
行为相同。可以通过从“content”属性中删除最后一个“。”来轻松删除它,但这样看起来有点奇怪。 - slightlyfaulty这里发布的解决方案对我来说效果不佳,因此我将本问题和以下问题的解决方案混合使用:是否可以在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 */
结果:
注:如果您想查看源代码或其他内容,请参阅此帖子的屏幕截图:http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html
counters
)可以创建嵌套编号。请参见被接受的答案。以下内容仅供历史兴趣。
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>
.foo > ol > li
。 - kennytmcounters()
函数,而不是counter()
函数,就像上面的示例一样。 - Mr. Lance E Sloan::marker
伪元素 来实现其他解决方案所需的同样效果,只需一行代码即可。请注意查看 浏览器兼容性表,因为这仍然是一项实验性技术。截至撰写本文时,只有 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>
您可能还想查看这个由smashingmagazine提供的优秀文章,涉及该主题。
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, ".") ") ";
}
当有两个列表且第二个列表位于 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/hy5f6161/解决了问题。
<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>
如果你想要对第一个子级li进行其他CSS的调整,以下是正确的代码。
<style>
li.title {
font-size: 20px;
counter-increment: ordem;
color:#0080B0;
}
.my_ol_class {
counter-reset: my_ol_class;
padding-left: 30px !important;
}
.my_ol_class li {
display: block;
position: relative;
}
.my_ol_class li:before {
counter-increment: my_ol_class;
content: counter(ordem) "." counter(my_ol_class) " ";
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
li.title ol li{
font-size: 15px;
color:#5E5E5E;
}
</style>
<ol>
<li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
<ol class="my_ol_class">
<li>
<p>
my text 1.
</p>
</li>
<li>
<p>
my text 2.
</p>
</li>
</ol>
</li>
</ol>