我正在一家餐馆网站上工作.该设计要求在菜单项和价格之间填充典型的虚线.我一直在网上搜索并乱了一个小时左右,现在似乎没有找到任何好方法只用CSS做到这一点.如果你有一个纯色背景,我在这里发现了其他几个解决方案,但是在这个网站上它使用背景图像并且这些解决方案不起作用.
示例：Menu style “….” – fill in with periods有一个很好的解决方案,但它将菜单项和价格的背景颜色设置为白色以隐藏它们后面的虚线,但我正在构建的页面有一个背景图像,因此任何纯色背景看起来都很糟糕.
我已尝试在元素上使用表行/表格单元格或任何其他类型的CSS显示属性和宽度设置的各种组合,但没有骰子.
这是一些假的样本标记：
<ul>
<li><span>Soup</span><span class="dots"> </span><span>$2.99</span></li>
<li><span>Ice cream</span><span class="dots"> </span><span>$5.99</span></li>
<li><span>Steak</span><span class="dots"> </span><span>$20.99</span></li>
</ul>
我一直试图通过使用带有底部边框的“dots”类元素来填补空白,但我尝试的任何工作都没有.我也只是在每行底部的LI元素上放置一个底部边框,但这不是设计师想要的.作为最后的手段,我只能想到在javascript中这样做,但想知道你们是否有任何想法.或者,我可以使用表格,但我也想避免这样做.
谢谢！
解决方法
我会用这样的东西：
它使用.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上的纯色替换为background-image本身.
