效果
directory.png
思路
讓省略號鋪滿一行，相對整行絕對定位。標(biāo)題定位在左邊，頁碼定位在右邊站欺，層級高出省略號的層級。
代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>報告</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style mce_bogus="1" type="text/css">
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
body {
font-family: SimSun;
font-size: 14px;
}
li {
list-style: none;
}
@page {
size: A4;
margin-top: 1.0in;
-fs-flow-top: "header";
-fs-flow-bottom: "footer";
-fs-flow-left: "left";
-fs-flow-right: "right";
border-top: thin solid black;
padding: 0.325em;
}
/* 頁面 */
.container {
width: 720px;
margin: 0 auto;
}
.page {
width: 720px;
height: 960px;
}
/* 第二頁 */
.page-two-title {
font-size: 22px;
font-weight: bold;
padding: 95px 0 30px;
color: #2D74B5;
}
.page-two-directory p {
font-size: 12px;
margin-bottom: 25px;
font-weight: bold;
display: block;
clear: both;
}
.page-two-directory ul li {
width: 720px;
display: block;
clear: both;
overflow: hidden;
height: 20px;
line-height: 20px;
margin: 10px 0;
position: relative;
}
.page-two-directory ul li span {
background: white;
display: inline-block;
padding: 0 10px;
}
.page-two-directory ul li .page-two-theme{
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.page-two-directory ul li .page-two-page{
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
.page-two-directory ul li .page-two-point {
position: absolute;
top: 0;
left: 0;
width: 670px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<!-- 第二頁 -->
<div class="page">
<div class="page-two">
<div class="page-two-title">
<p>目錄</p>
</div>
<div class="page-two-directory">
<ul>
<li><span class="page-two-page">3</span><span class="page-two-theme">一纤垂、概述</span>
<p class="page-two-point">………………………………………………………………………………………………………………………………………………………………………</p>
</li>
<li><span class="page-two-page">3</span><span class="page-two-theme">二矾策、基本情況介紹</span>
<p class="page-two-point">………………………………………………………………………………………………………………………………………………………………………</p>
</li>
<li><span class="page-two-page">3</span><span class="page-two-theme">三、資產(chǎn)盤點范圍</span>
<p class="page-two-point">………………………………………………………………………………………………………………………………………………………………………</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
