7

参考这个小提琴：http: //jsfiddle.net/exGnZ/

嗨，我正在尝试使用无序列表和前导点重现目录。不幸的是，当内容很长时，格式就会崩溃。有谁知道如何让下图中的第 2 章与点出现在同一行？

在此处输入图像描述

这是我目前得到的代码：http: //jsfiddle.net/exGnZ/

我也贴在这里：

    <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>

和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;
    }
4

3 回答 3

3

这是我的破解：JSFiddle

这种技术的唯一缺点是它需要一个固定的右侧宽度（在这种情况下为 100 像素）才能工作，但这是一个小的权衡。

于 2012-01-17T17:08:51.527 回答
3

这个怎么样：http: //jsfiddle.net/exGnZ/40/

我能在我有的时间里做到最好。

于 2012-01-17T17:15:49.740 回答
2

我的两便士值在这里。

我使用相对定位而不是浮动，并在跨度之后添加了一个伪元素，以防止在 ul 的宽度减小时链接重叠（？）。

于 2012-01-17T19:22:06.257 回答