Question

可能重复：
  Number nested ordered lists in HTML
  HTML: ordered sublists

我想创建一个数字化的索引：

1.0

1.1

1.1.1

1.1.2

1.1.3

1.2

2.0

2.1

2.2

最好的方法是什么？ ul，ol？

<ul>
<li><span>1.0</<span>First entry</li>
<li><span>1.1</<span>Second entry</li>
</ul>

Answer 1

您正在寻找的内容很容易用每个计数器增加的css。您不需要自己编写数字了。

阅读here

Answer 2

嗨，你可以做到，我举个例子

<强> CSS

body{
    counter-reset:section;
}
div{
    margin-top:10px;margin-left:10px;
}
.numercal {
    counter-reset:subsection;
    font-weight:bold;
}
.numercal:before{
    counter-increment:section;
    content:"Section " counter(section) ". ";
    font-style:italic;
    color:red;
}
.numercal-no:before{
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

<强> HTML

<div>
    <p class="numercal">Demo Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
</div>


<div>
    <p class="numercal">Demo Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
</div>




<div>
    <p class="numercal">Demo Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
    <p class="numercal-no">Sub Text here</p>
</div>

直播演示click here http://jsfiddle.net/rohitazad/Xwm3C/1/

现在关于这一点的更多信息请访问此网站http://reference.sitepoint.com/css/counter-increment

http://www.w3.org/wiki/CSS/Properties/counter-increment

Answer 3

你不需要跨度，除非你明确地想把它标记为某些东西，造型等...... 除非你需要做与现在不同的事情，否则你所做的接缝很好。如果你只想用1,2,3等枚举它，那么你可以使用ol而不是ul。

HTML：如何创建一个数字索引

3 个答案: