使用CSS在内容列表中执行引导点的好方法是什么？
示例：
Link.............Chapter 1
Link.............Chapter 2
Link.............Chapter 3
答案 0 :(得分：44)
这是我在这个点头的问题上找到的最好的CSS解决方案：
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
}
我们创建了带有'：before'伪元素的点引线 LI元素。伪元素填充列表的整个宽度 带点的项目和SPAN放在上面。背景白色 SPAN隐藏在它们后面的点和UL上的“溢出：隐藏” 确保点不会延伸到列表之外。
我使用了任意80个点，这足以填满约38em，因此 列表中的最大宽度。
答案 1 :(得分：22)
取自catchmyfame：
“这是怎么做的？基本上，字段标签被包裹在一个div中，这个div有一个小点的图像，在x方向上重复应用作为背景。这就会导致点在文本下流动，从而使效果，然后将文本本身包裹在一个跨度中，其中背景颜色设置为与包含元素的背景颜色相匹配。这是CSS：
.dots {
background: url('dot.gif') repeat-x bottom;
}
.field {
background-color: #FFFFFF;
}
要将此应用于示例表单，您只需将其用作：
<td>
<div class="dots">
<span class="field">LastName</span>
</div>
</td>
答案 2 :(得分：9)
可以将classic technique of "leaders" described by the w3c感谢@nootrope与flexbox的喜悦结合起来。
演示：http://jsfiddle.net/tbm62z6L/2/
.article {
display: flex;
}
.article .item,
.article .price {
flex: 1 0 auto;
}
.article .dots {
flex: 0 1 auto;
/*Allows too long content to be hidden.*/
overflow: hidden;
}
.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>
这是一种非常灵活的方式，可以使用当前字体显示前导点，而无需使用图像。
答案 3 :(得分：9)
在@Nico O的answer上构建，不需要非语义.dots元素。
.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;
}<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>
我们利用这样一个事实：我们可以根据需要订购Flex容器的子节点，以及伪元素的行为类似于定义它的子节点的事实。关键是flex-grow规则。一个flex-grow 1，而所有其他兄弟姐妹的默认0将增长到剩余空间，即使它没有内容。
这将一直有效，直到.title和.chapter元素一起填满所有空格。然后::after伪元素将width 0，并且不显示虚线边框，即使.title和.chapter将包裹它们内容。因此，如果您确定不会发生这种情况，并且您的观看者使用modern browsers这可能是最佳解决方案。
如果你想要一个更稀疏的点，你可以使用径向渐变作为伪元素的背景而不是border-bottom：
.toc li::after {
background-image: radial-gradient(circle, currentcolor 1px, transparent 1px);
background-position-y: bottom;
background-size: 1ex 3px;
background-repeat: repeat-x;
height: 1em;
}
答案 4 :(得分：7)
我把几个例子搞砸了，以创造我认为非常好的解决方案。不依赖背景颜色来隐藏领导者点。也适用于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;
}
答案 5 :(得分：5)
许多这种css hack不适用于透明背景或难以处理。你可以使用现代的flex和background-gradient来制作虚线（它看起来更精致，然后是桌面点缀）。 像这样：
.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>
答案 6 :(得分：3)
实际上，W3C有一份工作草案，描述了您正在寻找的功能
http://www.w3.org/TR/css3-gcpm/#leaders
即使在2005年，A List Apart也发表了一篇文章。 （http://www.alistapart.com/articles/boom）不幸的是，它似乎对我不起作用，而且我找不到更多。但也许值得记住的是，在不久的将来有一天只能使用CSS：）
答案 7 :(得分：3)
这是我的方法，使用带有虚线边框样式的元素而不是图像或内容，使其弯曲并将其放在“链接”和“章节”之间。
.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>
答案 8 :(得分：2)
带有CSS网格的领先点
.leaders {
list-style: none;
margin: 0;
padding: 0;
}
.leaders li {
width: 100%;
display: grid;
grid-template-columns: auto 1fr auto;
grid-gap: 5px;
justify-items: start;
align-items: center;
justify-content: start;
}
.dots {
border-bottom: 1px dashed #000;
width: 100%;
}<ul class="leaders">
<li>
<span>Grilled Cheese</span>
<span class="dots"></span>
<span>7.95</span>
</li>
<li>
<span>Wonton Soup</span>
<span class="dots"></span>
<span>8.95</span>
</li>
<li>
<span>Waffles</span>
<span class="dots"></span>
<span>7.95</span>
</li>
<li>
<span>Shrimp Etouffee</span>
<span class="dots"></span>
<span>15.25</span>
</li>
</ul>
答案 9 :(得分：1)
.dots { display：inline-block; 宽度：325px; 白色空间：nowrap; 溢出：隐藏！重要; 文本溢出：省略号; }
.dot
{
display: inline-block;
width: 185px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
答案 10 :(得分：1)
我迟到了，但我们最近不得不在工作中这样做，最后我使用了这样的模块：
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>
答案 11 :(得分：1)
可以在没有跨度或类别的情况下完成点头。这是HTML表格的响应式解决方案，经过修改后可以垂直居中于点头：
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;
}
答案 12 :(得分：1)
其他解决方案都不适合我。这是我的解决方案：
Leader Dots: http://jsfiddle.net/g0d8x8c5/127/
HTML
<div class="main">
<p>Example # 1</p>
<div class="container">
<div class="row">
<span>$150</span><span class="dots"></span><span>remaining credit</span>
</div>
<div class="row">
<span class="spacer"></span><span>30</span><span class="dots"></span><span>remaining days</span>
</div>
</div>
<p>Example # 2</p>
<div class="container">
<div class="row">
<span>Food Item #1</span><span class="dots"></span><span>$12.95</span>
</div>
<div class="row">
<span>Food Item #22</span><span class="dots"></span><span>$7.95</span>
</div>
</div>
</div>
CSS
.main {
/* to prove it respects width of outer containers */
width: 320px;
}
.row {
display: flex;
}
.dots {
/* shorthand - flex: 1 1 auto */
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.dots:before {
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . ";
}
.row span:first-child,
.row span:last-child {
/* shorthand - flex: 0 0 auto */
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
.row span:first-child {
padding-right: 0.33em;
}
.row span:last-child {
padding-left: 0.33em;
}
.spacer {visibility: hidden}
.spacer:before {content: "$"}
答案 13 :(得分：1)
我需要让客户轻松在其网站上编辑价格表，因此我将原始内容创建为带有两列的简单html表。在任何CMS中都非常容易编辑
然后，根据先前的答案并能够处理格式化为表格的数据的目标，我使用了以下内容。我尝试了虚线底边框方法，但这很丑陋。因此，我采用了“按内容显示”的方法。
.toc table {
width: unset;
margin: 0 auto;
margin-top: 1ex;
display: block;
}
.toc table tbody {
display: block;
}
.toc table tr {
display: flex;
}
.toc table tr td {
width: auto !important;
}
.toc table tr td:first-child {
order: 1;
white-space: nowrap;
}
.toc table tr td:last-child {
order: 3;
white-space: nowrap;
}
.toc table tr:after {
flex-grow: 1;
order: 2;
content: ". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . ";
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}<div class="toc">
<table>
<tbody>
<tr>
<td>
Product 1
</td>
<td>$123,456</td>
</tr>
<tr>
<td>Product 2</td>
<td>$12,345</td>
</tr>
</tbody>
</table>
</div>