用CSS,一个有序的列表能产生像1.1、1.2、1.3这样的结果吗(而不是1、2、3……)?到目前为止,使用list-style-type:decimal只生成了1,2,3,而不是1.1,1.2。1.3点。
当前回答
所选的答案是一个很好的开始,但它本质上强制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/
其他回答
我有一些问题时,有两个列表和第二个是在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中创建多级有序列表吗?
/* 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
注意:使用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 >
我需要将此添加到12中发布的解决方案中,因为我使用了一个混合了有序列表和无序列表组件的列表。不加引号似乎有点奇怪,我知道,但它很管用……
ol ul li:before {
content: no-close-quote;
counter-increment: none;
display: list-item;
margin-right: 100%;
position: absolute;
right: 10px;
}
你可以使用计数器来做到这一点:
下面的样式表编号嵌套列表项,如“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 >
有关更多信息,请参见嵌套计数器和范围。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?