4

我正在尝试以 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>

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

4

3 回答 3

8

您可以将生成的内容用于点...（我从这篇文章中学到了这一点）

我们使用附加到 LI 元素的 ':before' 伪元素创建点前导符。伪元素用点填充列表项的整个宽度，并将 SPAN 放在顶部。SPAN 上的白色背景将点隐藏在它们后面，UL 上的“溢出：隐藏”确保点不会延伸到列表之外：（来自这篇 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

您可以border-bottom在中间 td 上设置一个类：

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

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

于 2013-07-18T06:43:27.533 回答
0

看到这个小提琴。

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

您可以在中间再添加一个 td 并使用边框底部将 css 赋予该 td。给所有 td 的 css“宽度百分比”。

试试这个会有帮助的。

于 2013-07-18T07:51:34.290 回答