有序列表可以产生的结果，看起来像1.1,1.2,1.3(而不是只是1,2,3，…)与css?

用CSS，一个有序的列表能产生像1.1、1.2、1.3这样的结果吗(而不是1、2、3……)?到目前为止，使用list-style-type:decimal只生成了1,2,3，而不是1.1,1.2。1.3点。

231858 次浏览
小开

注意:在现代浏览器中使用CSS 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>

小开
最佳答案

你可以使用计数器来做到这一点:

下面的样式表编号嵌套列表项，如“1”、“1.1”、“1.1.1”等。

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>

更多信息请参见嵌套计数器和作用域。

小开

所选的答案是一个很好的开始，但它实际上是在列表项上强制使用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/

小开 
<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>
< p >结果: http://i.stack.imgur.com/78bN8.jpg < / p >
小开

这里发布的解决方案对我来说并不是很好，所以我把这个问题和下面的问题混合在一起:是否有可能在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

小开

我需要将此添加到12中发布的解决方案中，因为我使用了一个混合了有序列表和无序列表组件的列表。不加引号似乎有点奇怪，我知道，但它很管用……

ol ul li:before {
content: no-close-quote;
counter-increment: none;
display: list-item;
margin-right: 100%;
position: absolute;
right: 10px;
}
小开

本页上没有任何解决方案适用于所有级别和长(包装)段落。由于标记(1)的大小可变，实现一致的缩进确实很棘手。， 1.2, 1.10, 1.10.5，…);它不能只是“伪造”，甚至不能为每个可能的缩进级别预先计算边缘/填充。

< img src = " https://i.stack.imgur.com/x3YhV.png " alt = " / >

我终于想出了一个解决方案，实际工作，不需要任何JavaScript。

它在Firefox 32, Chromium 37, IE 9和Android浏览器上进行了测试。不能在ie7和之前版本上工作。

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, ".") " ";
}

< >强的例子: 示例 < / p >

在JSFiddle上试试，在要点上分叉。

小开

我有一些问题时，有两个列表和第二个是在DIV 第二个列表应该从1开始。不是2.1 < / p > 

<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/ < / p >

小开

下面的方法对我很有效:

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, ".") ") ";
}

看:http://jsfiddle.net/rLebz84u/2/

或者这个http://jsfiddle.net/rLebz84u/3/ 与更多和合理的文本

小开

这是正确的代码，如果你想第一个子李调整其他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>

HTML文件。

        <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>
小开

在不久的将来，你可能能够使用::marker psuedo-element来实现与其他解决方案相同的结果，只需一行代码。

记住检查浏览器兼容性表，因为这仍然是一个实验技术。 在撰写本文时，只有Firefox和Firefox for Android(从版本68开始)支持此功能。< / p > 这是一个片段，如果在兼容的浏览器中尝试，将正确呈现: 
::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的好文章关于这个话题。

小开

我在添加编号列表Python减价的TOC扩展。

我是这样做的:

.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }

我不确定这是正确的方法，但对我来说很有效。


提交答案