用CSS,一个有序的列表能产生像1.1、1.2、1.3这样的结果吗(而不是1、2、3……)?到目前为止,使用list-style-type:decimal只生成了1,2,3,而不是1.1,1.2。1.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>
其他回答
注意:使用CSS计数器在现代浏览器中创建嵌套编号。请看公认的答案。以下内容仅供参考。
如果浏览器支持内容和计数器,
. foo { counter-reset: foo; } .foo li { list-style-type:没有; } .foo li::before { counter-increment: foo; 内容:“1.”counter(foo)“”; } < ol class = " foo " > <李> uno李< / > <李> dos李< / > <李>非常李< / > <李>四弦吉他李< / > < / ol >
你可以使用计数器来做到这一点:
下面的样式表编号嵌套列表项,如“1”、“1.1”、“1.1.1”等。 OL {counter-reset: item} LI{显示:块} LI:前面{内容:计数器(项目,“。”)“”;反增量:item}
例子
ol(反重置:项目) 李显影:街区! 李:之前(项目,“项目”)”;补充:项目: < ol > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < li > li元素< / li > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < / ol >
有关更多信息,请参见嵌套计数器和范围。
下面的方法对我很有效:
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/ 有更多和合理的文本
本页上没有任何解决方案适用于所有级别和长(包装)段落。由于标记(1)的大小可变,实现一致的缩进确实很棘手。, 1.2, 1.10, 1.10.5,…);它不能只是“伪造”,甚至不能为每个可能的缩进级别预先计算边缘/填充。
我终于想出了一个解决方案,实际上工作,不需要任何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, ".") " ";
}
例子:
在JSFiddle上试试,在Gist上分叉。
我有一些问题时,有两个列表和第二个是在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/