用CSS在目录中做前导点的好方法是什么?
例:
Link.............Chapter 1 Link.............Chapter 2 Link.............Chapter 3
摘自这篇有关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>