html - 使用 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;   
}

不错的副作用 - 你不需要 float 元素。然而，此解决方案使用 display:table-cell，因此这在旧 IE ( 根据背景，您可以使用 li-border solution并将跨度元素上的纯色替换为背景图像本身。