帶有虛線的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>