如何通过标记实现以下列表布局？
如何通过标记实现以下列表布局？
提问于 2013-02-05 14:49:10
可能重复： 实现ol条目html的子编号
我试图通过使用无序列表来实现这样的目标：
1.标题
目标:这里的一些文字..。
/T11111-1996工业用间接option1法
/T1287-1993工业用1.2 option2
/T13135-1993工业用准相准1.3 option3
2.标题
目标:这里的一些文字..。
/T1259.2-1998工业用产品质量标准2.1 option1
/T1259.2-1998化学分析方法-2.2 option2
C_(2)C_(2)C_(2.3)C_(2.3) option3
我试过使用list-style: decimal;，但它只实现了1、2、3等数字，而我需要它们的格式为1.2、1.3 . 2.1、2.3等。使用一个无序列表也可以实现这一点，还是需要使用多个？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-05 14:56:24
在我的一个项目中，我使用了以下代码(演示)
(我不记得我从哪里得到的，但它起作用了)
ol{
counter-reset: listing ;
}
li {
display: block ;
}
li:before {
content: counters(listing, ".") " ";
counter-increment: listing ;
}当然，此方法为您提供了许多其他事情的控制器:您可以使用content属性根据需要自定义计数器。
Stack Overflow用户
发布于 2013-02-05 14:51:16
我认为这是不可能的。参见此处所有可能的list-style类型全
Stack Overflow用户
发布于 2013-02-05 15:29:48
我认为css中的计数器属性可能存在浏览器兼容性问题。
为什么不使用jquery呢？
<style type="text/css">
ul
{
list-style-type: none;
}
</style>
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
<script>
var num = 1.0;
$( "li" ).each(function( index ) {
var text = $(this).text();
index++;
list = num + (index / 10);
$(this).html(list + " . " + text);
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14710262
复制相关文章
相似问题
腾讯云开发者
