CSS reaktionsfähige mehrzeilige Liste mit gestrichelten Linien (Name - - - Preis)

Question

Ich versuche herauszufinden, wie man einen mehrzeiligen Punktleiter erstellt, wenn der Hintergrund texturiert ist oder Sie den Hintergrund nicht kennen. Die W3C-Site bietet eine good example, wenn Sie die Hintergrundfarbe kennen, aber das funktioniert nicht für meine Bedürfnisse. Here is a SO example von einem strukturierten Hintergrund, der wirklich gut funktioniert, aber die Führer verschwinden, wenn die Linie zu einer 2. Zeile bricht. Leider verwenden die beiden eine andere Methode, um diesen Effekt zu erzielen, also bin ich mir nicht sicher, ob wir das Beste aus beiden Welten hier kombinieren können ...

Hier ist sorta was ich denke. Ist es möglich?

Answer 1

Etwas aus der Spitze von meinem Kopf:
_{(Ehrlich gesagt, weiß ich nicht für andere besser und reaktions Lösung):}

jsBin demo (so you can resize and play with)

• Place 2 span (als Tisch-Zelle) innerhalb eines LI Als table
• Trick die letzte Spanne width: 1%;
• Fügen Sie die gewünschten Striche oder Punkte oder auch ein Hintergrundbild zu dem ersten span ' s :after Pseudoelement

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>