CSS

Question

ile noktalı bir çizgi ayırıcı/dolgu ekleme

Bir restoran web sitesinde çalışıyorum. Tasarım, bir menü öğesi ve fiyat arasında tipik noktalı çizgi dolgusu çağırır. Ağları ovalayarak ve bir saatliğine şımartıyorum ve bunu sadece CSS ile yapmanın iyi bir yolunu bulamıyorum. Düz renkli bir arka plana sahipseniz harika çalışan başka çözümler buldum, ancak bu sitede bir arka plan görüntüsü kullanıyor ve bu çözümler işe yaramaz.

Örnek: Menu style "...." - fill in with periods iyi bir çözüme sahiptir, ancak arka plan rengini menü öğesinin beyazına ve arkasındaki noktalı çizgileri gizlemek için fiyata ayarlar, ancak yapıyorum sayfasının arka plan görüntüsü vardır, böylece herhangi bir düz renk arka planı olur kötü görünüyor.

Tablo-satır/tablo hücresi veya diğer herhangi bir CSS görüntüleme öznitelikleri ve genişlik ayarlarının tüm türlerini, ancak hiçbir zar kullanmadan kullanmayı denedim. Ben işleri denemek bu boşluğu doldurmak için bir alt sınır ile "nokta" sınıfı elemanı kullanarak çalışmak için çalışıyorlar

<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> 

, ama hiçbir şey: Burada

bazı sahte örnek biçimlendirme olduğunu . Ayrıca, LI elemanına her satırın altından sonuna kadar alt bir kenarlık koyuyorum, ancak bu tasarımcı istediği gibi değil. Sadece son çare olarak javascript içinde yapmayı düşünebilirim, ancak herhangi bir fikrin olup olmadığını görmek istedim. Ya da sadece tabloları kullanabilirim, ama gerçekten bundan kaçınmak istedim.

Teşekkürler!

Answer 1

:

Example Fiddle

O .dots elemana noktalı kenarlığı kullanan ve üstüne o bazı pikselleri kaydırır .

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; 
} 

Güzel yan etki - öğeleri yüzdürmenize gerek yoktur. Ancak bu çözüm display:table-cell kullanır, bu nedenle bu eski IE'lerde çalışmayacaktır (< IE8).
Arka plana bağlı olarak, li-border solution modelini kullanabilir ve arkaplan resminin kendisi ile span öğelerindeki katı renkleri değiştirebilirsiniz.

Answer 2

Ben tanım listeleri (fiddle) kullanılarak elde edilebilir:

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: Böyle bir şey ile gider

* {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