有序列表可以产生类似1.1，1.2，1.3的结果吗(而不仅仅是1，2，3，...)使用css？
一个有序列表可以产生类似1.1，1.2，1.3的结果吗(而不仅仅是1，2，3，...)使用CSS？到目前为止，使用list-style-type:decimal只产生了1，2，3，而不是1.1，1.2，.，1.3。
回答 11
Stack Overflow用户
发布于 2010-11-04 23:30:29
您可以使用counters来执行此操作：
以下样式表将嵌套列表项编号为"1“、"1.1”、"1.1.1“等。
OL { counter-reset: item } LI { display: block }LI:之前{ 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>
有关详细信息，请参阅。
Stack Overflow用户
发布于 2014-10-08 04:50:42
本页面上的解决方案没有一种能够正确且通用地适用于所有级别和长(换行)的段落。由于标记的大小可变(1.，1.2，1.10，1.10.5，…)，实现一致的缩进真的很棘手。；它不能仅仅是“伪造的”，甚至不能为每个可能的缩进级别预先计算边距/填充。
我最终找到了一种实际有效且不需要任何JavaScript的解决方案。
它在火狐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, ".") " ";
}示例：
Stack Overflow用户
发布于 2013-04-29 10:09:07
选择的答案是一个很好的开始，但它本质上强制在列表项上使用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/
https://stackoverflow.com/questions/4098195
复制相似问题
腾讯云开发者
