4

次の形式でhtmlで目次を作成しようとしています

Introduction.................................1
Heading 1....................................1
Heading 2....................................2

ここで、... をタイトルの最後の文字から右の数字に移動したいと思います。

単一の tr と 2 つの td (タイトル用とページ番号用) を持つテーブルでこの作業を行うことができますが、最初の td に境界線の下部がありますが、.. は代わりに境界線全体を横切りますちょうど最後の文字から。

これをhtmlで表現できるより良い方法はありますか？

HTML でこれを行う理由については、HTML-> PDF コンバーターにエクスポートしているため、HTML でなければなりません。

これは私がこれまでに持っているものです

<h1>Contents</h1>

<ul>
    <li>
        <table style="width:100%">
            <tr style="">
                <td>System Overview Manual..adn the dog went to the zoo and had a really good time and it was really really good.</td>
                <td style="text-align: right; "> <span id='contents1'>2</span>

                </td>
            </tr>
        </table>
    </li>
</ul>

フィドル: http://jsfiddle.net/EBhAX/

4

3 に答える 3

8

生成されたコンテンツをドットに使用できます... (この投稿からこれを学びました)

LI 要素に付加された「:before」疑似要素でドット リーダーを作成します。疑似要素は、リスト項目の幅全体をドットで埋め、SPAN を一番上に配置します。SPAN の白い背景はその背後のドットを隠し、UL の「overflow: hidden」はドットがリストの外に出ないようにします: (この w3.org の記事から)

編集:ネストされたリストを許可するようにコードを更新しました

フィドル

マークアップ

<ul class="outer">
    <li><a href="#">Introduction</a><span>1</span></li>
    <li class="nested">
        <ul class="inner">
            <li><a href="#">Header 1</a><span>2</span>
            </li>
            <li><a href="#">Header 2</a><span>2</span>
            </li>
        </ul>
    </li>
    <li><a href="#">Header 2</a><span>3</span></li>
</ul>

CSS

ul
{
    list-style: none;
    padding: 0;
    overflow-x: hidden;
}
.outer {
    width: 70%;  
}
.inner
{
    padding-left: 20px;
}
li:not(.nested):before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "
}
li a:first-child {
    padding-right: 0.33em;
    background: white
}
a + span {
    float: right;
    padding-left: 0.33em;
    background: white
}
于 2013-07-18T07:36:11.800 に答える
0

このフィドルを参照してください。

http://jsfiddle.net/EBhAX/4/

真ん中に td をもう 1 つ追加し、その td に border-bottom を使用して css を渡すことができます。すべての td に CSS の「パーセント幅」を指定します。

これを試してみてください 役に立ちます。

于 2013-07-18T07:51:34.290 に答える
0

border-bottomクラスを使用して、中間の td を設定できます。

td.text {
    border-bottom: 1px dotted black
}

フィドル: http://jsfiddle.net/EBhAX/2/

于 2013-07-18T06:43:27.533 に答える