直接上码
<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<style>
body {
font-family: FangSong,HanaMinB;
line-height: 1.2;
/*设置背景色*/
/*background: #00FF00 ;*/
/*设置背景图片*/
/*background-image:url(data:image/gif;base64,AAAA) no-repeat fixed top;*/
}
/** 指定pdf纸张大小 **/
@page {
size: A4 ;
margin: 1cm;
/*margin-bottom: 1cm;*/
/*border: thin solid black;*/
}
.page_break { page-break-after:always;}
.seclev2 {
text-indent:20pt;
}
.seclev2c {
text-indent:40pt;
}
a {
text-decoration:none;
}
a:link {
color:#000000;
}
a:visited {color:#00FF00;}
ul li{list-style-type:none;}
ul li div{display:inline-block;}
.catalog-out{position:relative;width: 100%;height:17px}
.catalog-line{border-top:1px dashed #d8d8d8; position: absolute;top:10px;margin:0.5px;width:98%;}
.catalog-title{position: absolute;left:0px;padding:0.5px;z-index: 100;text-align: left;background:#ffffff;padding-right:20px;}
.catalog-page-num{position: absolute;right:0px;padding:0.5px;z-index: 100;text-align: right;background:#ffffff;padding-left:20px;}
</style>
</head>
<body>
<ul>
<li>
<div class="catalog-out">
<div class="catalog-title">第一章 概要</div><div class="catalog-line"> </div><div class="catalog-page-num">1</div>
</div>
<ul>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">1</div>
</div>
<ul>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1.1 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">2</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1.2 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">3</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1.3 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">4</div>
</div>
</li>
</ul>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.2 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">1</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.3 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">5</div>
</div>
</li>
</ul>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">第二章 总体设计</div><div class="catalog-line"> </div><div class="catalog-page-num">6</div>
</div>
<ul>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">7</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.2 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">8</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.3 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">9</div>
</div>
</li>
</ul>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">第三章 详细设计</div><div class="catalog-line"> </div><div class="catalog-page-num">10</div>
</div>
<ul>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">11</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.2 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">12</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.3 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">13</div>
</div>
</li>
</ul>
</li>
</ul>
</body>
</html>
效果下图，随意伸缩：
目录样式效果图
关键的样式
/* 去除ul自带的. 样式 */
ul li{list-style-type:none;}
/* 设置div不换行 */
ul li div{display:inline-block;}
/* 目录行最外层，定义内部为相对定位 */
.catalog-out{position:relative;width: 100%;height:17px}
/* 目录中间的线 */
.catalog-line{border-top:1px dashed #d8d8d8; position: absolute;top:10px;margin:0.5px;width:98%;}
/* 目录左侧标题 ，固定左侧，设置白底遮住部分line，伸缩不会发生举例变化 */
.catalog-title{position: absolute;left:0px;padding:0.5px;z-index: 100;text-align: left;background:#ffffff;padding-right:20px;}
/* 目录右侧页码 ，固定右侧，设置白底遮住部分line，伸缩不会发生举例变化*/
.catalog-page-num{position: absolute;right:0px;padding:0.5px;z-index: 100;text-align: right;background:#ffffff;padding-left:20px;}
也可以通过工具生成pdf：
https://gitee.com/Rayin/rayin
