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

Question

可能重复：
在 ol 项目 html 上实现子编号

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

1. 标题

目标：这里有一些文字......

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

2. 标题

目标：这里有一些文字......

     2.1 选项1
     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

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

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

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>