[英]CSS styling a table of contents
我正在嘗試復制以下目錄:
我已經非常接近以下代碼: http : //jsfiddle.net/33Kgn/2/
.list li {
position:relative;
overflow:hidden;
width:330px;
}
.list li:after {
font-family: Times New Roman;
font-size: 120%;
content:".................";
text-indent: -1px;
display:block;
letter-spacing:34px;
position:absolute;
left:0px;
bottom:0px;
z-index:-1;
font-weight:bold;
}
.list li span {
display:inline-block;
background-color:#FFF;
padding-right:5px;
}
.list li .number {
float:right;
font-weight:bold;
padding-left:5px;
}
<div style="margin:25px 22px 200px 22px;">
<div style="text-align:center;font-size:150%;letter-spacing:.1em;margin-bottom:10px;margin-right:-.1em;">CONTENTS</div>
<ul class="list" style="padding-left:180px;">
<li style="margin:0 0 .6em 0;"><span>EDITOR’S INTRODUCTION</span><span class="number">ix</span></li>
<li style="margin:0 0 .5em 0;"><span style="padding-left:.6em;">1. Historical</span><span class="number">ix</span></li>
<li style="margin:0 0 .5em 0;"><span style="padding-left:.6em;">2. Epistemology</span><span class="number">xii</span></li>
<li style="margin:0 0 .5em 0;"><span style="padding-left:.6em;">3. Epistemology of Morals</span><span class="number">xx</span></li>
<li style="margin:0 0 .5em 0;"><span style="padding-left:.6em;">4. Psychology of Morals</span><span class="number">xxvi</span></li>
<li style="margin:0 0 .5em 0;"><span style="padding-left:.6em;">5. The Moral System</span><span class="number">xxx</span></li>
<li style="margin:0 0 1.5em 0;"><span style="padding-left:.6em;">6. Morals and Theology</span><span class="number">xliii</span></li>
<li style="margin:0 0 .5em 0;"><span>A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS</span><span class="number">1</span></li>
<li style="margin:0 0 .5em 0;"><span>INDEX</span><span class="number">297</span></li>
</div>
</div>
但正如您可以看到如果您按照鏈接,“A REVIEW ...”和“INDEX”部分不起作用。 任何幫助,將不勝感激。
編輯添加:這里的困難在於“回顧道德中的主要問題”的縮進和包裝線。 所以這個問題還沒有答案。
這是JSBin
使用display: inline;
而不是display: inline-block;
在你的list li span{...}
CSS類
list li span {
display: inline;
background-color: rgb(255, 255, 255);
padding-right: 5px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.