Kesik çizgilerle CSS duyarlı çok satırlı liste (ad - - - fiyat)

Question

Arka plan dokulu olduğunda veya arka planı bilmediğinizde çok çizgili bir nokta liderinin nasıl oluşturulacağını anlamaya çalışıyorum. W3C sitesi, arka plan rengini bildiğinizde good example sağlar, ancak bunlar benim ihtiyaçları için çalışmaz. Gerçekten iyi çalışan dokulu bir arka planın Here is a SO example, ancak hatlar ikinci hatta geçtiğinde liderler kayboluyor. Ne yazık ki, bu etkiyi elde etmek için iki farklı yöntem kullanıyorum, bu yüzden her iki dünyanın en iyilerini birleştirmenin en iyi yolunun emin değilim ...

İşte düşündüğüm sorta. Mümkün mü?

Answer 1

aklımdan üstünden şey: (Ben başka daha iyi ve duyarlı çözüm için bilmiyorum Dürüst)
_:

jsBin demo (so you can resize and play with)

• yer 2 spanwidth: 1%;
• bir LI grubu
• table olarak Trick son yayılma içinde (tablo-hücre gibi) birinci span istenen çizgiler veya noktalar ya da arka plan-resmi ekleme ' s :after sözde elemanı

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>