在html中创建目录 [英] Creating table of contents in html

问题描述

是否可以创建如下所示的有序列表？
我喜欢这样的内容我创建。

1. 进入


2. Section1
   
   2.1 SubSection1
   
   2.2 SubSection2
   
   
3. Section2
   .... 。

我有以下内容，但是每个小节从1开始重新开始。

 <醇> 
< li> 
< a href =＃Lnk>< / a> 
< / li> 
< li> 
< a href =＃Lnk>< / a> 
< / li> 
< ol> 
< li> 
< a href =＃Lnk>< / a> 
< / li> 
< li> 
< a href =＃Lnk>< / a> 
< / li> 
< / ol> 
< / ol> 
  

谢谢

解决方案 div>

这确实可以用纯CSS完成：

  ol {
 counter-reset：item 
 
 li {
 display：block 
} 
 li：在{
 content：counters（item，。）; 
 counter-increment：item 
} 
  

与小提琴相同的例子： a href =http://jsfiddle.net/N79nP/> http://jsfiddle.net/N79nP/

Is it possible to create an ordered list like the following? I like this for a table of contents I'm creating.

1. Into
2. Section1
   2.1 SubSection1
   2.2 SubSection2
   
3. Section2
   .....

I have the following but each subsection restarts from 1.

<ol>
        <li>
            <a href="#Lnk"></a>
        </li>
        <li>
            <a href="#Lnk"></a>
        </li>
        <ol>
            <li>
                <a href="#Lnk"></a>
            </li>
            <li>
                <a href="#Lnk"></a>
            </li>
        </ol>
</ol>

Thanks

解决方案

This can indeed be done with pure CSS:

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

Same example as a fiddle: http://jsfiddle.net/N79nP/

这篇关于在html中创建目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！