我不知道这是否适用于PDF,但回答了如何在CSS中完成此操作的问题:
您可以使用css中伪元素的反增量生成数字:
请注意,我更改了您的< ul>到< ol>因为这是一个有序列表,无论您是否使用列表样式.
ol {
counter-reset: list-counter;
}
li:after {
counter-increment: list-counter;
content: counter(list-counter);
float: right;
}
在文本和数字之间做一点虚线需要更多的工作,但你可以通过添加一些额外的span元素并使用css display:table;并显示:table-cell;妥善安排它们:
- Test
- Test2
- Test3
li {
display: table;
}
li span,li:after {
display: table-cell;
vertical-align: bottom;
}
li span.line {
border-bottom: 1px dotted #000;
width: 100%;
}
在span.line元素上将宽度设置为100%,而不设置任何宽度会强制它填充所有剩余空间(这是由于表格单元格显示元素不允许中断到新行,并且阻止溢出的内容)
这不是必须添加额外span元素的最干净的方法,但这是一个棘手的任务.也许其他人可以花时间想出一种更有效的方法来实现它?您可以随时在整个< li>下面添加下划线,并跳过额外的标记,但代价是不太酷.