用CSS添加虛線間隔/填充

Question

我正在一家餐館的網站上工作。該設計要求菜單項和價格之間的典型虛線填充。我一直在搜索網絡，並且現在搞了一個小時左右，似乎無法找到任何只用CSS來完成此任務的好方法。我在這裏發現了一些其他的解決方案，如果你有一個純色背景，那麼這個解決方案很好用，但是在這個網站上它使用了一個背景圖片，這些解決方案無法工作。

例如：Menu style "...." - fill in with periods有一個很好的解決方案，但它將背景顏色設置爲白色的菜單項和價格以隱藏它們後面的虛線，但是我正在構建的頁面具有背景圖像，因此任何純色背景都會看起來不太好。

我試過使用各種組合的表格行/表格單元格或任何其他類型的CSS顯示屬性和寬度設置元素，但沒有骰子。

下面是一些假的樣品標記：

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

我一直試圖讓這個通過使用「點」類元素與下邊框，以填補缺口的工作，但沒有我嘗試作品。我也只是在每行底部的LI元素上放置一個底部邊框，但這不是設計師想要的。我只能想到用javascript做最後的手段，但想看看你們是否有任何想法。或者，我可以使用表格，但真的想避免這種情況。

謝謝！

Answer 1

我會像這樣的東西去：

Example Fiddle

它使用.dots元素上的虛線邊框和移動它的一些像素的頂部。

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

不錯的副作用 - 你不需要漂浮的元素。但是，此解決方案使用display:table-cell，因此這在舊IE（< IE8）中不起作用。
根據背景的不同，您可以使用li-border solution，並使用背景圖像本身替換span-elements上的純色。

Answer 2

我可以使用自定義列表（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