Elastyczna lista wielowierszowa CSS z przerywanymi liniami (nazwa - - - cena)

Question

Próbuję dowiedzieć się, jak utworzyć wielowierszową linię odniesienia, gdy tło jest teksturowane lub nie znasz tła. Witryna W3C zapewnia good example, gdy znasz kolor tła, ale to nie działa na moje potrzeby. Here is a SO example z teksturowanego tła, które działa bardzo dobrze, ale liderzy znikają, gdy linia łamie się do drugiej linii. Niestety, dwa używają innej metody, aby osiągnąć ten efekt, więc nie jestem pewien, jak najlepiej połączyć najlepsze z obu światów ...

Oto, o czym myślę. Czy to możliwe?

Answer 1

Coś ze szczytu mojego umysłu:
_{(szczerze nie wiem o żadnym innym lepiej i reagującego roztworze):}

jsBin demo (so you can resize and play with)

• miejsce 2 span (w tabeli komórek) Wewnątrz LI zestaw jako table
• trick ostatni Span width: 1%;
• dodanie preferowanej kresek i kropek lub nawet obraz tła pierwszego span ' s :after elementem pseudo

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>