带有虚线的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>