问题:

I'm trying to replicate the following table of contents:

I've gotten pretty close with the following code: 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&rsquo;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>

But as you can see if you follow the link, the "A REVIEW..." and "INDEX" part doesn't work. Any help would be appreciated.

EDITED TO ADD: The difficulty here lies in the indentation and line-wrapping of "A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS". So this question does not yet have an answer.

回答1:

Here is JSBin

Use display: inline; instead of display: inline-block;

in your list li span{...} CSS class

list li span {     display: inline;     background-color: rgb(255, 255, 255);     padding-right: 5px; }

转载请标明出处:CSS styling a table of contents

文章来源: CSS styling a table of contents

标签

margin

padding

list

css

table