在chrome中写html,html – 在Chrome中使用CSS打印目录的页码

我不知道这是否适用于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;妥善安排它们:

  1. Test
  2. Test2
  3. 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>下面添加下划线,并跳过额外的标记,但代价是不太酷.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值