html - 如何像书籍目录一样显示连接章节名称和章节页码的点列表？

This question already has answers here:

Create leading dots in CSS

(15 个回答)


7年前关闭。




使用 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

最佳答案

这个 jsfiddle 当然是一个黑客，但它可以满足你的要求。

我在你的 li 中添加了一个 hr 标签，我 float 了你的号码。

hr 的样式带有底部边框 dotted 并且它是绝对定位的。

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

关于html - 如何像书籍目录一样显示连接章节名称和章节页码的点列表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22151817/