如何仅使用 CSS 为目录创建前导点？-css教程-PHP中文网

如何仅使用 CSS 为目录创建前导点？

Linda Hamilton

发布： 2024-12-20 03:25:12

原创

678 人浏览过

How to Create Leading Dots for Table of Contents using Only CSS?

使用 CSS 创建目录前导点

在目录中实现前导点可能很棘手，但 CSS 提供了一种有效的方法解决方案。

仅限 CSS方法：

根据信誉良好的来源的建议，以下纯 CSS 技术可以优雅地解决此问题：

ul.leaders {
  max-width: 40em;
  padding: 0;
  overflow-x: hidden;
  list-style: none;
}

ul.leaders li:before {
  float: left;
  width: 0;
  white-space: nowrap;
  content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . ";
}

ul.leaders span:first-child {
  padding-right: 0.33em;
  background: white;
}

ul.leaders span + span {
  float: right;
  padding-left: 0.33em;
  background: white;
}

登录后复制

HTML 结构：

要利用此技术，请按如下方式构建 HTML：

<ul class="leaders">
  <li><span>Salmon Ravioli</span> <span>7.95</span></li>
  <li><span>Fried Calamari</span> <span>8.95</span></li>
  <li><span>Almond Prawn Cocktail</span> <span>7.95</span></li>
  <li><span>Bruschetta</span> <span>5.25</span></li>
  <li><span>Margherita Pizza</span> <span>10.95</span></li>
</ul>

登录后复制

此方法无需借助图像或复杂的 JavaScript 解决方案即可有效创建引导点，从而提供干净且具有视觉吸引力的演示文稿。

以上是如何仅使用 CSS 为目录创建前导点？的详细内容。更多信息请关注PHP中文网其他相关文章！