设计一个目录的CSS样式 [英] CSS styling a table of contents

问题描述

我试图复制以下目录：

我已经非常接近以下代码： http://jsfiddle.net/33Kgn/2/

  .list li {
位置：相对; 
 overflow：hidden; 
 width：330px; 
} 
 
 .list li：在{
 font-family：Times New Roman; 
 font-size：120％; 
内容：.................; 
 text-indent：-1px; 
 display：block; 
 letter-spacing：34px; 
位置：绝对; 
 left：0px; 
 bottom：0px; 
 z-index：-1; 
 font-weight：bold; 
} 
 .list li span {
 display：inline-block; 
背景颜色：#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 =liststyle =padding-left：180px;> 
< li style =margin：0 0 .6em 0;>< span> EDITOR& rsquo; INTRODUCTION< / span>< span class =number> ix< / span> < /锂> 
< li style =margin：0 0 .5em 0;>< span style =padding-left：.6em;> 1。历史< / span>< span class =number> ix< / span>< / li> 
< li style =margin：0 0 .5em 0;>< span style =padding-left：.6em;> 2。认识论< / span>< span class =number> xii< / span>< / li> 
< li style =margin：0 0 .5em 0;>< span style =padding-left：.6em;> 3。道德认识论< / span>< span class =number> xx< / span>< / li> 
< li style =margin：0 0 .5em 0;>< span style =padding-left：.6em;> 4。道德心理学< / span>< span class =number> xxvi< / span>< / li> 
< li style =margin：0 0 .5em 0;>< span style =padding-left：.6em;> 5。道德体系< / span>< span class =number> xxx< / span>< / li> 
< li style =margin：0 0 1.5em 0;>< span style =padding-left：.6em;> 6。道德与神学< / span>< span class =number> xliii< / span>< / li> 
< li style =margin：0 0 .5em 0;>< span>回顾道德中的主要问题< / span>< span class =number>跨度>< /锂> 
< 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;





在您的列表中li span {...} CSS class



  list li span {
 display：inline; 
 background-color：rgb（255,255,255）; 
 padding-right：5px; 
} 
  




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.

解决方案

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样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！