在CSS中创建领先的点 [英] Create leading dots in CSS

问题描述

使用CSS在内容表中做出引导点的好方法是什么？

What is a nice way to do leading dots in a table of contents with CSS?

示例：

Link.............Chapter 1
Link.............Chapter 2
Link.............Chapter 3

推荐答案

取自 catchmyfame ：

这是怎么做的？基本上，字段标签被包裹在一个div中，它有一个在x方向重复应用的点的小图像作为背景。将会导致点在文本下面流动，以使该效果无效，然后文本本身被包裹在一个跨度中，其中背景颜色被设置为与包含元素的背景的颜色匹配这里是CSS：

"How is this done? Basically field label is wrapped in a div which has a small image of a dot applied repeatedly in the x direction as a background. This alone would cause the dots to flow under the text so to nullify that effect, the text itself is then wrapped in a span where the background color is set to match the color of the background of the containing element. Here is the CSS:

.dots { 
  background: url('dot.gif') repeat-x bottom; 
}
.field {
  background-color: #FFFFFF;
} 

要将此应用于示例表单，您只需将其用作：

To apply this to the example form, you would just use it as:

<td>
    <div class="dots">
        <span class="field">LastName</span>
    </div>
</td>

图片的点

这篇关于在CSS中创建领先的点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！