Question

我正在尝试以

的形式在html中创建目录

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

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

我可以在一个表中使用单个tr和两个tds（一个用于标题，一个用于页码），在第一个td上有一个border-bottom，但是..遍历整个边框，而不仅仅是最后一个字符。

我有更好的方式在html中表示这个吗？

至于为什么我在HTML中这样做，我们将它导出为HTML-＆gt; 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/

Answer 1

您可以使用生成的内容作为点...（我从this post了解到这一点）

我们创建了带有'：before'伪元素的点引线 LI元素。伪元素填充列表的整个宽度带点的项目和SPAN放在上面。背景白色 SPAN隐藏在它们后面的点和UL上的“溢出：隐藏” 确保点不会延伸到列表之外:(来自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
}

Answer 2

您可以使用类设置中间td的border-bottom：

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

小提琴：http://jsfiddle.net/EBhAX/2/

Answer 3

见这个小提琴。

<强> http://jsfiddle.net/EBhAX/4/

你可以在中间和另外添加一个td将css给边框底部的td。给所有td的css“width in percent”。

试试这会有所帮助。

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

3 个答案:

标记

CSS