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

私の2ペンスの価値はここにあります。

フロートの代わりに相対ポジショニングを使用し、スパンの後に疑似要素を追加して、ulの幅が狭くなった場合にリンクがアンダーラップ（？）しないようにしました。

于 2012-01-17T19:22:06.257 に答える