html - html中带虚线下划线的目录

Question

我正在尝试以 html 的形式创建目录

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

现在我想要...从标题中的最后一个字符到右边的数字。

我可以在一个带有单个 tr 和两个 tds(一个用于标题，一个用于页码)的表格中获得这种工作方式，第一个 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>

fiddle :http://jsfiddle.net/EBhAX/

Answer 1

您可以为点使用生成的内容...(我从 this post 中学到了这一点)

We create the dot leaders with a ‘:before’ pseudo-element attached to the LI elements. The pseudo-element fills the whole width of the list item with dots and the SPANs are put on top. A white background on the SPANs hides the dots behind them and an ‘overflow: hidden’ on the UL ensures the dots do not extend outside the list: (from this w3.org article)

编辑:更新代码以允许嵌套列表

FIDDLE

标记

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