将无序列表转换为目录 [英] Turning an unordered list into a table of contents

问题描述

参考这个小提琴：

我也可以在这里粘贴：

 < div> 
< ul id =toc> 
< li>< span>简介< / span> < a href =＃>第1章< / a>< / li> 
< li>< span>风暴云隐约暴风云隐约暴风云隐约暴风云隐约暴风云隐约< / span> < a href =＃>第2章< / a>< / li> 
< li>< span>太阳休息< / span> < a href =＃>第3章< / a>< / li> 
< li>< span>丢失和混淆< / span> < a href =＃>第4章< / a>< / li> 
< li>< span>金壶< / span> < a href =＃>第5章< / a>< / li> 
< li>< span>名义名义< / span> < a href =＃>第6章< / a>< / li> 
< / ul>< / div> 
  

和CSS：

 div {padding：10px;} 
 #toc {
 list-style：none; 
 margin-bottom：20px; 
} 
 #toc li {
 background：url（http://5thirtyone.com/sandbox/share/toc/dot.gif）repeat-x bottom left; 
 overflow：hidden; 
 padding-bottom：2px; 
} 
 #toc a，
 #toc span {
 display：inline-block; 
 background：#fff; 
 position：relative; 
 bottom：-4px; 
} 
 #toc a {
 float：right; 
 padding：0 0 3px 2px; 
} 
 #toc span {
 float：left; 
 padding：0 2px 3px 0; 
} 
  

解决方案

href =http://jsfiddle.net/exGnZ/40/ =nofollow> http://jsfiddle.net/exGnZ/40/

最好的时候我可以管理。

Reference this fiddle: http://jsfiddle.net/exGnZ/

Hi, I'm trying to reproduce a table of contents with an unordered list and leader dots. Unfortunately, when there's a long line of content, the formatting breaks down. Does anyone know how to get Chapter 2 in the image below to appear on the same line as the dots?

Here's the code I've got at the moment: http://jsfiddle.net/exGnZ/

I'm also pasting it here:

    <div>
    <ul id="toc">
    <li><span>Introduction</span> <a href="#">Chapter 1</a></li>
    <li><span> Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming</span> <a href="#">Chapter 2</a></li>
    <li><span>Sun breaks</span> <a href="#">Chapter 3</a></li>
    <li><span>Lost and confused</span> <a href="#">Chapter 4</a></li>
    <li><span>The pot of gold</span> <a href="#">Chapter 5</a></li>
    <li><span>Nom nom nom</span> <a href="#">Chapter 6</a></li>
    </ul></div>

And the CSS:

    div {padding:10px;}
    #toc {
        list-style: none;
        margin-bottom: 20px;
    }
    #toc li {
        background: url(http://5thirtyone.com/sandbox/share/toc/dot.gif) repeat-x bottom left;
        overflow: hidden;
        padding-bottom: 2px;
    }
    #toc a,
    #toc span {
        display: inline-block;
        background: #fff;
        position: relative;
        bottom: -4px;
    }
    #toc a {
        float: right;
        padding: 0 0 3px 2px;
    }
    #toc span {
        float: left;
        padding: 0 2px 3px 0;
    }

解决方案

How about this: http://jsfiddle.net/exGnZ/40/

Best I could manage in the time I had.

这篇关于将无序列表转换为目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！