有序列表可以产生类似1.1，1.2，1.3的结果吗(而不仅仅是1，2，3，...)使用css？
有序列表可以产生类似1.1，1.2，1.3的结果吗(而不仅仅是1，2，3，...)使用css？
提问于 2010-11-04 23:21:19
一个有序列表可以产生类似1.1，1.2，1.3的结果吗(而不仅仅是1，2，3，...)使用CSS？到目前为止，使用list-style-type:decimal只产生了1，2，3，而不是1.1，1.2，.，1.3。
回答 7
Stack Overflow用户
发布于 2014-08-14 09:46:27
这里发布的解决方案对我来说效果不好，所以我混合了这个问题和以下问题的解决方案：Is it possible to create multi-level ordered list in 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
Stack Overflow用户
发布于 2019-10-07 19:24:47
在不久的将来，您可能只需一行代码就可以使用::marker psuedo-element实现与其他解决方案相同的结果。
记住检查Browser Compatibility Table，因为这仍然是一项实验技术。在写这篇文章的时候，只有Firefox和Firefox for Android，从版本68开始，才支持这一点。
下面是一个可以在兼容浏览器中正确呈现的代码片段：
::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>
您可能还想查看此主题的great article by smashingmagazine。
Stack Overflow用户
发布于 2013-09-25 20:33:29
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4098195
复制相关文章
相似问题
腾讯云开发者
