代码之家  ›  专栏  ›  技术社区  ›  Bryan Denny

在CSS中创建前导点

css
  •  30
  • Bryan Denny  · 技术社区  · 14 年前

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

    例子:

    Link.............Chapter 1
    Link.............Chapter 2
    Link.............Chapter 3
    
    13 回复  |  直到 14 年前
        1
  •  19
  •   Biff MaGriff    12 年前

    取自 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>
    

    image 为圆点

        2
  •  43
  •   Mathieu Castets Riyad Kalla    10 年前

    这是我为这个dot leaders问题找到的最好的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元素。伪元素填充列表的整个宽度 带有圆点和跨度的项放在上面。白色背景 跨距隐藏了它们后面的点和溢出:隐藏在ul上 确保点不会延伸到列表之外。

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

        3
  •  7
  •   Community datashaman    7 年前

    可以将 classic technique of "leaders" described by the w3c 多亏了 @nootrope 带着flexbox的喜悦。

    这里有一个替代方法 Modern Browsers and 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>

    这是一种非常灵活的显示前导点的方法,使用当前字体,不需要使用图像。

        4
  •  6
  •   Rúnar Berg Zebra    7 年前

    建立在 @Nico O S 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 规则。一 弹性增长 属于 1 而所有其他兄弟姐妹都有默认值 0 将增长到剩余空间,即使它没有内容。

    这项工作将一直持续到 .title .chapter 元素一起填充所有空间。然后 ::after 伪元素将具有 width 属于 即使 标题 第章 将包装其内容。所以如果你确定不会发生这种情况,你的观众会使用 modern browsers 这可能是最佳解决方案。

        5
  •  5
  •   westy808    10 年前

    我混合了几个例子来创建一个我认为很好的解决方案。不依赖背景色来隐藏前导点。也适用于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;
    }
    
        6
  •  3
  •   Denis Savenko    7 年前

    许多这种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>
        7
  •  2
  •   Ozone    8 年前

    这里是我的方法,使用带点边框样式的元素而不是图像或内容,使其灵活,并将其放在“链接”和“章节”之间。

    .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
  •  1
  •   F Lekschas    12 年前

    准确地说,W3C有一个工作草案描述了您正在寻找的功能

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

    甚至在2005年,一份单独列出的清单也为它发表了一篇文章。( http://www.alistapart.com/articles/boom )不幸的是,它似乎对我不起作用,我也没有找到更多。但也许值得记住的是,在不久的将来,有一天只使用CSS是可能的:)

        9
  •  0
  •   Cuteboy_Max    9 年前

    点 { 显示:内联块; 宽度:325px; 空白:nowrap; 溢出:隐藏!重要事项; 文本溢出:省略号; }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
    

        10
  •  0
  •   ryanve    8 年前

    我参加晚会迟到了,但我们最近不得不在工作中这样做,结果我使用了这样的模块:

    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
  •  0
  •   Michael McGinnis    7 年前

    点引线可以在没有跨距或类的情况下完成。下面是一个针对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
  •  0
  •   Asher Garland    6 年前

    其他的解决方案对我都不起作用。以下是我的解决方案:

    • 考虑到父划分的宽度。
    • 不使用不允许动态环境的白色背景技巧。
    • 不使用点的图片,因此点可以始终匹配其他字体颜色。
    • 以两种方式都有价值,并有不同或不同的价值来呈现

    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
  •  0
  •   Parapluie    5 年前

    很好的问题和答案。

    我发现,当需要交替的背景色时,这些工作答案中的许多都会失效。 li 元素。这是我修正这一点的贡献。

    Sample list with alternating background items

    这是基于Nootrope在本页上的优秀解决方案。如果需要,可以重新添加他们的“领导”课程。

    ul{
        padding: 0;
        overflow-x: hidden;
        margin:0 0 24pt;
        list-style: none;
        list-style-type:none;
    }
    ul li{
        background:white;
    }
    ul li:nth-child(odd){
        background:lightgrey;
    }
    ul li:before {
        float:left;
        width:0;
        white-space:nowrap;
        content:
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . ";
    }
    ul span:first-child {
        padding: 0 0.33em 0 0.8em;
        background:inherit;
    }
    ul span + span{
        float: right;
        padding: 0 0.8em 0 0.33em;
        background:inherit;
    }
    

    使这项工作发挥作用的主要部分是 padding background:inherit; ul span 部分。

    还要注意,在 ul li:before 允许扩展到更宽的弹性布局。

    希望这对你有帮助。