小编典典

在CSS中创建前导点

css

用CSS在目录中做前导点的好方法是什么?

例:

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

阅读 345

收藏
2020-05-16

共1个答案

小编典典

摘自这篇有关CSS的领导者点的

字段标签包裹在div中,该div具有在x方向上重复应用的小点图像作为背景。仅此一项将导致点在文本下方流动。因此,为消除这种影响,文本本身会被包裹在一个跨度中,在该跨度中,背景色设置为与包含元素的背景色匹配。

这是CSS:

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

要将其应用于示例表单,只需将其用作:

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

堆栈片段中的演示

.dots {

  background: url('https://i.stack.imgur.com/otJN0.png') repeat-x bottom;

}

.field {

  background-color: #FFFFFF;

}

.link {

  width: 150px;

  display: inline-block;

}


<div class="row">

  <div class="dots link">

      <span class="field">Link</span>

  </div>

  <span class="chapter">

      Chapter 1

  </span>

</div>



<div class="row">

  <div class="dots link">

      <span class="field">Link</span>

  </div>

  <span class="chapter">

      Chapter 2

  </span>

</div>



<div class="row">

  <div class="dots link">

      <span class="field">Link</span>

  </div>

  <span class="chapter">

      Chapter 3

  </span>

</div>
2020-05-16