html - 带虚线的 CSS 响应式多行列表(名称 - - - 价格)

Question

我正在尝试弄清楚当背景有纹理或您不知道背景时如何制作多线点引导符。 W3C 网站提供了一个 good example当您知道背景颜色时，但这不符合我的需要。 Here is a SO example带纹理的背景效果非常好，但是当线中断到第二行时，领导者消失了。不幸的是，两者使用不同的方法来实现这种效果，所以我不确定在这里结合两全其美的最佳方法......

这就是我的想法。可能吗？

Answer 1

我的想法:
_{(老实说，我不知道还有什么其他更好的和响应式解决方案):}

jsBin demo (so you can resize and play with)

• 将 2 个 span(作为表格单元格)放在 LI 中，设置为 table
• 将最后一个跨度设置为 width: 1%;
• 将所需的破折号或点甚至背景图像添加到第一个 span 的 :after 伪元素

body{background:orange;}    /* No other backgrounds are used */

ul.leaders {
  padding:        0;
}
ul.leaders li {
  display:        table;
}
ul.leaders li span {
  display:        table-cell;
}
ul.leaders li span:first-child { /* TITLE */
  position:       relative;
  overflow:       hidden;       /* Don't go underneath the price */
}
ul.leaders li span:first-child:after { /* DASHES */
  content:        "";
  position:       absolute;
  bottom:         0.5em;        /* Set as you want */       
  margin-left:    0.5em;        /* Keep same for the next span's left padding */
  width:          100%;
  border-bottom:  1px dashed #000;
}
ul.leaders li span + span {     /* PRICE */
  text-align:     right;
  width:          1%;           /* Trick it */
  vertical-align: bottom;       /* Keep Price text bottom-aligned */
  padding-left:   0.5em;
  /* white-space: nowrap;       /* Uncomment if needed */
}

<ul class=leaders>
  <li>
    <span>Salmon Ravioli</span>
    <span>7.95</span>
  </li>
  <li>
    <span>Pan seared Ahi with avocado, soy, ginger and lime</span>
    <span>8.95</span>
  </li>
  <li>
    <span>Almond Prawn Cocktail</span>
    <span>7.95</span>
  </li>
  <li>
    <span>Bruschetta</span>
    <span>45.25</span>
  </li>
  <li>
    <span>Margherita Pizza</span>
    <span>108.95</span>
  </li>
</ul>