Question

使用HTML和/或CSS可以显示连接章节名称和章节页码的点列表，如书籍内容表：

一些章节名称................... 1
另一章名称............... 21
最后一章名称.................. 143

我目前的加价是：

<ol>
  <li><a href="">some chapter name</a><span class="toc-page-number">1</span>
  <li><a href="">another chapter name</a><span class="toc-page-number">21</span>
  <li><a href="">final chapter name</a><span class="toc-page-number">143</span>
</ol>

Example of book table of content

Answer 1

这jsfiddle肯定是一个黑客，但它可以满足您的要求。

我在你的李中加了一个hr标签，我把你的号码浮起来。

hr的底部边框为dotted，并且它位于绝对位置。

问题是我们在文本下面看到了点，所以我为这些元素添加了白色背景。

Answer 2

不使用javascript或jquery，我有两个建议：

一个是将.div放在具有border-bottom-style: dotted的两个元素（章节名称和页码）之间。这看起来不太理想，但应该完成工作。

或另一种（可能更好）选择可能是在两者之间创建一个元素，它具有任意数量的'...'然后制作overflow-x: hidden，这将迫使点被切断。

这将需要新的中间元素填充页面和标题之间的空间。最好通过将标题和页码放在html中的点之前，然后将标题左侧和页码右侧浮动来实现。这是一个小提琴：http://jsfiddle.net/Renson/y236C/

Answer 3

可能使用伪元素（IE8 +）

Codepen Example

<强> HTML

<ol>
  <li><a href="">some chapter name</a><span class="toc-page-number">1</span>
  <li><a href="">another chapter name</a><span class="toc-page-number">21</span>
  <li><a href="">final chapter name</a><span class="toc-page-number">143</span>
</ol>

<强> CSS

ol {
  width:500px;
  margin:25px auto;
  border:1px solid grey;
  padding: 0;
}

li {
  margin-bottom:10px;
  overflow:hidden;
}

li a {
  text-transform:uppercase;
  text-decoration:none;
  display: inline-block;
  position: relative;
  z-index:1;
   padding-left:10px;
  background-color: white; /* required*/ 
}

li span {
  float:right;
  position: relative;
  padding-right:10px;
}

li span:before {
  content:"";
  width:999px;
  height:100%;
  position: absolute;
  top:-1px;
  right:100%;
  z-index:0;
  border-bottom:1px dotted black;
}

如何显示连接章节名称和章节页码的点列表，如书籍内容表？

3 个答案: