使用CSS添加虚线spacer/infill

Question

我正在一家餐馆网站上工作.该设计要求在菜单项和价格之间填充典型的虚线.我一直在网上搜索并乱搞它一个小时左右现在似乎找不到任何好方法只用CSS做到这一点.如果你有纯色背景,我在这里发现了其他几个解决方案,但是在这个网站上它使用背景图像,这些解决方案不起作用.

示例:菜单样式"...." - 填写句点有一个很好的解决方案,但它将菜单项和价格的背景颜色设置为白色以隐藏它们后面的虚线,但我正在构建的页面有一个背景图像所以任何纯色背景都会看起来很糟糕.

我已尝试在元素上使用表行/表格单元格或任何其他类型的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>

我一直试图通过使用带有底部边框的"dots"类元素来填补空白,但我尝试的任何工作都没有.我也只是在每行底部的LI元素上放置一个底部边框,但这不是设计师想要的.作为最后的手段,我只能想到在javascript中这样做,但想知道你们是否有任何想法.或者,我可以使用表格,但我也想避免这样做.

谢谢!

Answer 1

我会选择这样的东西：

小提琴示例

它使用元素上的虚线边框.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 解决方案，并用背景图像本身替换跨度元素上的纯色。