在CSS中创build主要的点
什么是一个很好的方式来做在CSS目录中的前导点？
例：
Link.............Chapter 1 Link.............Chapter 2 Link.............Chapter 3 从catchmyfame采取：
“这是怎么完成的？基本上字段标签被包裹在一个div中，这个div在x方向上反复使用一个点的小图像作为背景，仅仅这样就会导致点在文本下面stream动，从而使这个效果无效然后将文本本身包裹在一个范围内，其中背景颜色设置为与包含元素的背景颜色相匹配。以下是CSS：
.dots { background: url('dot.gif') repeat-x bottom; } .field { background-color: #FFFFFF; }
要将其应用于示例表单，您只需将其用作：
<td> <div class="dots"> <span class="field">LastName</span> </div> </td>
图像的点
这是针对这个点号领导者的最佳CSS解决scheme：
http://www.w3.org/Style/Examples/007/leaders.en.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>
CSS2 / CSS3
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 }
我们使用LI元素附加的“：before”伪元素创build点领导。 伪元素用点填充列表项的整个宽度，SPAN放在最上面。 SPAN上的白色背景隐藏了它们后面的点，UL上的“溢出：隐藏”确保点不会超出列表的范围。
我使用了一个任意的80个点，这足以填充约38em，因此列表上的最大宽度。
可以将W3C感谢@nootrope 描述的“领导者”的经典技术与flexbox的喜悦结合起来。
这是另一种方法，适用于Modern浏览器和IE 10+ 。
演示： http : //jsfiddle.net/tbm62z6L/2/
.article { display: flex; } .article .item, .article .price { flex: 1 0 auto; } .article .dots { flex: 0 1 auto; } .dots::before { display: block; white-space: nowrap; overflow: hidden; text-overflow: clip; content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " }
<div class="article"> <span class="item">sandwichtoaster</span> <span class="dots"></span> <span class="price">$35</span> </div>
我捏造了几个例子来创build我认为是一个很好的解决scheme。 不依靠背景颜色来隐藏领袖点。 也适用于IE8。
http://jsfiddle.net/westy808/g0d8x8c5/1/
<ul class="leaders"> <li><span>Item</span><span>12.234</span></li> <li><span>Another Item</span><span>1,000.25</span></li> </ul> ul.leaders li { clear: both; } ul.leaders li span:first-child { float: left; padding: 0 .4em 0 0; margin: 0; } ul.leaders li span + span { float: right; padding: 0 0 0 .4em; margin: 0; } ul.leaders li:after { content: ""; display: block; overflow: hidden; height: 1em; border-bottom: 1px dotted; }
build立在@Nico O的答案上 ，不需要非语义的.dots元素。 人们可以简单地写
<ul class="toc"> <li><span class="title">Foo</span> <span class="chapter">Chapter 1</span></li> <li><span class="title">Bar</span> <span class="chapter">Chapter 2</span></li> </ul>
正如人们所期望的那样，并应用以下样式
.toc li { display: flex; } .toc li .title { order: 1; } .toc li .chapter { order: 3; } .toc li::after { content: ""; border-bottom: 1px dotted; flex-grow: 1; order: 2; }
JSFiddle在这里
我们利用这个事实，即我们可以订购我们的弹性容器的孩子，但是我们想要的是，伪元素的行为就像定义的孩子那样。 关键是flex-grow规则。 1的flex-grow ，而其他所有的兄弟姐妹有默认的0将增长到剩余的空间，即使它没有内容。
这将工作，直到.title和.chapter元素一起填满所有的空间。 那么::after伪元素的width将为0 ，即使.title和.chapter将包装其内容，也不会显示虚线边框。 所以如果你确定不会发生，而且你的观众使用现代浏览器，这可能是最佳的解决scheme。
许多这种CSS的黑客不能与transtarent背景或困难的工作。 你可以使用现代的弯曲和背景渐变为点（它看起来更加光滑，然后表点）。 喜欢这个：
.contacts-row { display: flex; width: 500px; } .dots { display: block; background: radial-gradient(circle, rgba(0,0,0,.62) 1px, transparent 1px) repeat-x; background-size: 20px 28px; flex-grow: 10; }
<div class="contacts-row"> <b>E-mail: </b> <span class="dots"></span> <span class="text">test@email</span> </div> <div class="contacts-row"> <b>Phone: </b> <span class="dots"></span> <span class="text">test-phone</span> </div>
实际上，W3C有一个工作草案，描述了你正在寻找的function
http://www.w3.org/TR/css3-gcpm/#leaders
即使在2005年，A List Apart也发表了一篇文章。 （ http://www.alistapart.com/articles/boom ）不幸的是，它似乎并没有为我工作，我还没有find更多。 但也许值得一提的是，在不久的将来有一天，只有CSS才有可能:)
.dots {display：inline-block; width：325px; 白色空间：nowrap; 溢出：隐藏！重要; 文本溢出：省略号; }
.dot { display: inline-block; width: 185px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; }
这里是我的方法，使用带有点边框样式的元素而不是图像或内容，使它变形并放在“链接”和“章节”之间。
.toc { width: 500px; } .row { flex-direction: row; display: flex; } .flex-dots { border-top-style: dotted; border-top-width: 1px; max-height: 1px; margin-top: 0.5em; } .flex-dots-vcenter { flex-direction: row; display: flex; } [flex] { flex: 1; }
<div class="toc"> <div class="row"> <span class="field1">Link 1</span> <div class="flex-dots-vcenter" flex><span class="flex-dots" flex></span></div> <span class="field2">Chapter 1</span> </div> <div class="row"> <span class="field1">Link 20</span> <div class="flex-dots-vcenter" flex><span class="flex-dots" flex></span></div> <span class="field2">Chapter 20</span> </div> <div class="row"> <span class="field1">Link 300</span> <div class="flex-dots-vcenter" flex><span class="flex-dots" flex></span></div> <span class="field2">Chapter 300</span> </div> </div>
我迟到了，但是我们最近不得不在工作中这样做，最后我使用了这样一个模块：
http://codepen.io/ryanve/pen/rrBpJq
.dot-leader { position: relative; overflow: hidden; /* clip the dots */ } .dot-leader__left { position: relative; display: inline-block; } .dot-leader__left::after { color: gray; content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."; font-weight: normal; display: inline-block; position: absolute; white-space: nowrap; margin-left: 5px; /* space left of dots */ } .dot-leader__right { background: white; /* cover the dots */ display: inline-block; position: absolute; right: 0; padding-left: 5px; /* space right of dots */ }
带有使用li.dot-leader标记
<ul class="is-no-padding"> <li class="dot-leader"> <span class="dot-leader__left">Pizza</span> <span class="dot-leader__right">$100</span> </li> </ul>
或者dl.dot-leader
<dl class="dot-leader"> <dt class="dot-leader__left">Pizza</dt> <dd class="dot-leader__right">$100</dd> </dl>
点领导可以完成没有跨度或类。 下面是HTML表格的一个响应式解决scheme，它被修改为垂直居中位置：
http://codepen.io/Paulie-D/pen/bpMyBQ
table { width: 90%; margin:100px auto; table-layout:fixed; border-collapse: collapse; } td { padding:1em 0 0 0; vertical-align:bottom; } td span{ background-color:#fff; } td:first-child { text-align: left; font-weight: 700; overflow: hidden; position: relative; } td:first-child::after { content: ''; position: absolute; bottom: .4em; width:1500px; height:0px ; margin-left: 1em; border-bottom:2px dotted grey; } td:last-child { text-align:right; width:3em; }
