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

Question

我正在试图弄清楚当背景纹理化或你不知道背景时如何制作一个多线点头.当你知道背景颜色时,W3C网站提供了一个很好的例子,但这并不适合我的需要.这是一个很好的纹理背景的例子,但是当线条突破到第二行时,领导者会消失.不幸的是,两者使用不同的方法来实现这种效果,所以我不确定在这里结合两者的最佳方法的最佳方法......

这是我正在思考的问题.可能吗？

Answer 1

从我的脑海中浮现出一些东西:(
_{老实说,我不知道任何其他更好,更敏感的解决方案):}

jsBin演示(所以你可以调整大小和玩)

• 将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>