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

Question

我试图弄清楚当背景纹理化或你不知道背景时如何制作多线点头。当您知道背景颜色时，W3C网站会提供good example，但这并不能满足我的需求。纹理背景的Here is a SO example效果非常好，但当线条突破到第二条线时，领导者会消失。不幸的是，两者使用不同的方法来实现这种效果，因此我不确定在这里结合两者的最佳方法的最佳方法......

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

Answer 1

从我的脑海中浮现出一些东西：
_{（老实说，我不知道其他更好的和响应解决方案）：}

<强> jsBin demo (so you can resize and play with)

• 将span（作为表格单元格）放置在LI集table
中
• 将最后一个范围设为width: 1%;
• 将所需的短划线或点或甚至背景图像添加到第一个span的{​​{1}}伪元素

＆＃13;

＆＃13;

:after

＆＃13;

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 */
}

＆＃13;

＆＃13;

＆＃13;