在CSS中创建前导点

Question

使用CSS在目录中执行前导点的好方法是什么？

例:

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

Answer 1

这是我在这个点头的问题上找到的最好的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
}

我们使用附加到LI元素的':before'伪元素创建点引线.伪元素用点填充列表项的整个宽度,并且SPAN放在顶部.SPAN上的白色背景隐藏在它们后面的点,并且UL上的"溢出:隐藏"确保点不会延伸到列表之外.

我使用了任意80个点,这足以填充约38em,因此列表中的最大宽度.

Answer 2

取自catchmyfame:

"这是怎么做的？基本上字段标签被包裹在一个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>

点的图像

Answer 3

建立@Nico O的答案,不需要非语义.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将包裹他们的内容.因此,如果您确定不会发生这种情况,并且您的观众使用现代浏览器,这可能是最佳解决方案.

Answer 4

它可以将结合经典技术由W3C描述的"领导者"的感谢@nootrope与Flexbox的喜悦.

对于Modern Browsers和IE 10+,这是另一种方法.

演示: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>

这是一种使用当前字体显示前导点的非常灵活的方式,无需使用图像.

Answer 5

我捏了几个例子来创建我认为非常好的解决方案.不依赖背景颜色来隐藏引导点.也适用于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;
}

Answer 6

实际上，W3C 有一份工作草案，描述了您正在寻找的功能

http://www.w3.org/TR/css3-gcpm/#leaders

早在 2005 年，A List Apart 就发表了一篇文章。（http://www.alistapart.com/articles/boom）不幸的是，它似乎对我不起作用，而且我还没有找到更多。但也许值得记住的是，在不久的将来有一天，仅使用 CSS 就可能实现:)

Answer 7

许多此类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>