Question

可能重复：
Achieving sub numbering on ol items html

我正试图通过使用无序列表来实现这样的目标：

1。标题

目标：此处有一些文字......

1.1选项1
1.2选项2
1.3选项3

2。标题

目标：此处有一些文字......

2.1 option1
2.2选项2
2.3选项3

我尝试使用list-style: decimal;，但只能实现1,2,3等数字，而我需要它们的格式为1.2,1.3 ...... 2.1,2.3等。这也可以通过使用一个无序来实现列表或我需要使用几个？

Answer 1

我认为这是不可能的。请参阅此处所有list-style种类型http://www.w3schools.com/Css/tryit.asp?filename=trycss_list-style-type_all

Answer 2

在我的一个项目中，我使用了这段代码（demo）

（我不记得从哪里得到它，但它有效）

ol{ 
    counter-reset: listing ;
}
li { 
    display: block ;
}
li:before { 
    content: counters(listing, ".") " "; 
    counter-increment: listing ;
}

此方法当然为您提供了许多其他控件：您可以使用content属性

自定义计数器

Answer 3

我认为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>

如何通过标记实现以下列表布局？

3 个答案: