5

我正在尝试复制以下目录：

我已经非常接近以下代码：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>

但正如您所看到的，如果您点击链接，“A REVIEW...”和“INDEX”部分不起作用。任何帮助，将不胜感激。

编辑补充：这里的困难在于“审查道德中的主要问题”的缩进和换行。所以这个问题还没有答案。

4

1 回答 1

1

这是JSBin

使用display: inline;代替display: inline-block;

在你的list li span{...}CSS 类中

list li span {
    display: inline;
    background-color: rgb(255, 255, 255);
    padding-right: 5px;
}
于 2013-09-04T18:57:50.057 回答