Dodawanie przerywanej linii przerywanej/wypełnienia za pomocą CSS

Question

Pracuję nad witryną restauracji. Projekt wymaga typowego przerywanego wypełnienia linii między pozycją menu a ceną. Przeszukałem sieć i błądziłem z nią przez godzinę lub dłużej i nie mogę znaleźć dobrych sposobów na zrobienie tego tylko z CSS. Znalazłem tutaj kilka innych rozwiązań, które działają świetnie, jeśli masz solidne, kolorowe tło, jednak na tej stronie używa obrazu tła, a te rozwiązania nie działałyby.

Przykład: Menu style "...." - fill in with periods ma dobre rozwiązanie, ale ustawia kolory tła na biały elementu menu i ceny, aby ukryć linie przerywane za nimi, ale strona, którą buduję, ma obraz tła, więc wszystkie stałe tła kolorów wyglądać źle.

Próbowałem używać wszystkich rodzajów kombinacji atrybutów wyświetlania i szerokości arkuszy tabeli/tabeli lub dowolnego innego typu elementów CSS, ale bez kości.

Oto niektóre fałszywe próbki znaczników:

<ul> 
    <li><span>Soup</span><span class="dots">&nbsp;</span><span>$2.99</span></li> 
    <li><span>Ice cream</span><span class="dots">&nbsp;</span><span>$5.99</span></li> 
    <li><span>Steak</span><span class="dots">&nbsp;</span><span>$20.99</span></li> 
</ul> 

staram się uzyskać to do pracy za pomocą „kropki” element klasy z dolnej granicy, aby wypełnić lukę, ale nie staram prace . Po prostu umieściłem dolną krawędź na elemencie LI na całej długości u dołu każdego wiersza, ale to nie jest to, czego chce projektant. Mogę myśleć tylko o zrobieniu tego w javascript jako ostateczności, ale chciałem sprawdzić, czy macie jakieś pomysły. Albo, mogę po prostu użyć tabel, ale naprawdę chciałem tego również uniknąć.

Dzięki!

Answer 1

pójdę z czymś takim :

Example Fiddle

Wykorzystuje granicę przerywana na elemencie .dots i przesuwa ją o kilka pikseli na górze.

ul li { 
    display:table-row; 
    width:15em; 
} 
ul li span{ 
    display:table-cell; 
} 
.dots{ 
    min-width:10em; 
    position:relative; 
    bottom:4px; 
border-bottom:1px dotted #777; 
} 

Przyjemny efekt uboczny - nie trzeba unieść elementów. Jednak to rozwiązanie używa display:table-cell, więc nie będzie działać w starych IE (< IE8).
W zależności od tła można użyć modelu li-border solution i zastąpić kolory stałe na elementach span samym obrazem tła.

Answer 2

I można osiągnąć za pomocą list Definition (fiddle):

HTML:

<div id="wrap"> 
    <div class="inner"> 
     <dl> 
      <dt>$2.89</dt> 
      <dd><em>Lorem ipsum dolor sit amet </em></dd> 
     </dl> 
     <dl> 
      <dt>$21.89</dt> 
      <dd><em>In porta nisl id nisl varius ullamcorper</em></dd> 
     </dl> 
     <dl> 
      <dt>$5.99</dt> 
      <dd><em>Suspendisse augue mauris, mattis ac, commodo quis, lobortis vel, mauris. Etiam dolor neque, iaculis sit amet, tincidunt nec, elementum ut, lorem.</em></dd> 
     </dl> 
     <dl> 
      <dt>$8.99</dt> 
      <dd><em>Donec sed felis sit amet risus</em></dd> 
     </dl> 
     <dl> 
      <dt>$11.50</dt> 
      <dd><em>Maecenas ante. Suspendisse pharetra, metus in tempus egestas, purus ante pellentesque purus, at gravida metus elit nec nunc. Etiam ante ligula, porttitor et, euismod commodo, pulvinar id, pede. Curabitur et magna. Vestibulum leo nibh, viverra sed, imperdiet non,</em></dd> 
     </dl> 
     <dl> 
      <dt>$5.99</dt> 
      <dd><em>Etiam ante ligula,</em></dd> 
     </dl> 
     <dl> 
      <dt>$5.99</dt> 
      <dd><em>Fusce condimentum</em></dd> 
     </dl> 
     <dl> 
      <dt>$7.55</dt> 
      <dd><em>Morbi nibh velit, sodales eu</em></dd> 
     </dl> 
     <dl> 
      <dt>$6.50</dt> 
      <dd><em>Etiam ante ligula,</em></dd> 
     </dl> 
     <dl> 
      <dt>$11.50</dt> 
      <dd><em>Fusce condimentum</em></dd> 
     </dl> 
     <dl> 
      <dt>$2.50</dt> 
      <dd><em>Morbi nibh velit, sodales eu</em></dd> 
     </dl> 
     <dl> 
      <dt>$21.50</dt> 
      <dd><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></dd> 
     </dl> 
    </div> 
</div> 

CSS:

* {margin:0;padding:0} 
h1,h2{padding:10px 20px 0} 
#wrap{ 
    width:500px; 
    border:1px solid #eff2df; 
    margin:20px 20px; 
    background:#809900; 
} 
* html #wrap {width:502px;w\idth:500px;} 
#wrap .inner{ 
    padding:20px 40px; 
    border:1px solid #4c7300; 
    position:relative; 
    left:-2px; 
    top:-2px; 
    background:#eff2df; 
    color:#4c7300; 
    width:418px; 
} 
* html #wrap .inner{width:500px;w\idth:418px;} 
#wrap dl{ 
    position:relative; 
    width:100%; 
    border-bottom:1px solid #eff2df; 
} 
#wrap dd{ 
    line-height:1.2em; 
    position:relative; 
    padding:0 5em 0 0; 
    text-align:left; 
    border-bottom:1px dotted #000; 
    clear:both; 
    margin:0 0 .4em 0; 
    min-height:0; 
} 
* html #wrap dd{ 
    border:none; 
    background: url(images/dotted-leader.gif) repeat-x left bottom; 
    height:1%; 
} 
#wrap dt{ 
    background:#eff2df; 
    padding:1px 0 1px 5px; 
    color:#809900; 
    position:absolute; 
    bottom:0px; 
    right:-1px; 
    z-index:99; 
} 
#wrap dd em{ 
    margin:0 ; 
    position:relative; 
    top:.25em; 
    padding:0 5px 0 0; 
    background:#eff2df; 
} 

Reference Link