1

这是我要复制的目录：

这是我到目前为止所拥有的：http: //jsfiddle.net/hTt6L/。你会注意到我什至没有尝试做堆叠的椭圆，因为我不知道该怎么做。

<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>
     <div style="margin-bottom:9px;">EDITOR&rsquo;S INTRODUCTION</div>
      <div style="margin:0 0 .5em 1em;">1. Historical</div>
      <div style="margin:0 0 .5em 1em;">2. Epistemology</div>
      <div style="margin:0 0 .5em 1em;">3. Epistemology of Morals</div>
      <div style="margin:0 0 .5em 1em;">4. Psychology of Morals</div>
      <div style="margin:0 0 .5em 1em;">5. The Moral System</div>
      <div style="margin:0 0 1.5em 1em;">6. Morals and Theology</div>
     <div style="margin:0 2em .5em 1em;text-indent:-1em;">A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS</div>
     <div style="margin:0 2em .5em 1em;">INDEX</div>
 </div>

最后，这是它在上下文中的样子：http ://www.dinkypage.com/185740#S2

4

2 回答 2

1

这是Fiddle 以查看它的实际效果。我将 DOM 更新为有一个列表，而不仅仅是常规 DOM。我spans在文本周围添加了一个span包含章节编号的新内容，例如“xi”。

这是新的CSS：

.list li {
    position:relative;
    overflow:hidden;
    width:250px;
}
.list li:after {
    content:".................";
    display:block;
    letter-spacing:16px;
    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;
    background-color:#FFF;
    font-weight:bold;
}
于 2013-08-30T01:47:00.630 回答
0

我认为 Front End Guy 的解决方案很好，但我采用了不同的方法，改用背景图像。使用content:after（就像 Front End Guy 所做的那样）你的椭圆，如果你不想要一个固定的宽度，只要确保你包含足够的宽屏幕。您还应该填充这些跨度，以确保与标题右侧和页码左侧的距离相等。

我还修改了 HTML（我们都使用列表是有原因的，你也应该这样做）。小提琴：http: //jsfiddle.net/Rkkud/

CSS：

li {
  background-image: url(data:image/gif;base64,R0lGODlhCgAKAKIAAAAAAP///9fX1ycnJ+3t7QAAAAAAAAAAACH5BAAHAP8ALAAAAAAKAAoAAAMNGLrc/jDKRwYUYOqVAAA7);
  background-position: 0 90%;
  background-repeat: repeat-x;
}

li:after {    
  display: inline-block;
  float: right;
  background: white;
  padding: 0 0 0 1em;
}
li.first:after {
  content: "ix";
}
li.second:after {
  content: "xii";
  float: right;
}
.index-title {
  display: inline-block;
  background: white;
  padding: 0 1em 0 0;
}
于 2013-08-30T01:53:09.120 回答