用CSS添加虚线spacer / infill [英] Adding a dotted line spacer/infill with CSS

问题描述

我在一家餐厅网站上工作。该设计要求在菜单项和价格之间的典型虚线填充。我一直在擦净网，弄乱它一个小时左右现在，似乎找不到任何好的方法，只用CSS。我发现了一些其他的解决方案在这里工作伟大的，如果你有一个纯色背景，但在这个网站上它使用的背景图像，那些解决方案不会工作。

示例：菜单样式.... - 填充周期有一个很好的解决方案，但它设置背景颜色为白色的菜单项和价格隐藏它们后面的虚线，但我正在建设的页面有一个背景图像，所以任何纯色

我已经尝试使用table-row / table-cell或任何其他类型的CSS显示属性和宽度设置的元素的所有种类的组合，但没有骰子。

这里是一些假的示例标记：

 < ul> 
< li>< span>汤< / span>< span class =dots>& nbsp;< / span>< span> $ 2.99< / span>< / li ; 
< li>< span>冰淇淋< / span>< span class =dots>& nbsp;< / span>< span> $ 5.99< / span> li> 
< li>< span>牛排< / span>< span class =dots>& nbsp;< / span>< span> $ 20.99< / span>< / li ; 
< / ul> 
  

我一直试图通过使用底部边框的dots类元素填补空白，但没有我试试作品。我也只是把一个底部边框在LI元素一路横跨每一行的底部，但这不是设计师想要的。我只能想到在JavaScript作为最后的手段，但想看看你们是否有任何想法。

谢谢！

解决方案

我会这样做：

示例小提琴

它使用上的虚线边框。

$

$

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解决方案，并将span元素上的纯色替换为background-image

I am working on a restaurant website. The design calls for the typical dotted line infill between a menu item and the price. I have been scouring the net and messing with it for an hour or so now and can't seem to find any good ways to do this with only CSS. I found a couple of other solutions on here that work great if you have a solid color background, however on this site it uses a background image and those solutions wouldn't work.

Example: Menu style "...." - fill in with periods has a good solution, but it sets the background colors to white of the menu item and price to hide the dotted lines behind them, but the page I am building has a background image so any solid color backgrounds would look bad.

I have tried using all kinds of combinations of table-row/table-cell or any other type of CSS display attributes and width settings on the elements, but no dice.

Here is some fake sample markup:

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

I have been trying to get this to work by using the "dots" class element with a bottom border to fill in the gap, but nothing I try works. I also just put a bottom border on the LI element all the way across the bottom of each row, but that is not what the designer wants. I can only think of doing it in javascript as a last resort, but wanted to see if you guys had any ideas. Or, I can just use tables, but really wanted to avoid that as well.

Thanks!

解决方案

I would go with something like this:

Example Fiddle

It uses the dotted border on the .dots element and shifts it some pixels to the top.

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

Nice sideeffect - you dont need to float the elements. However this solution uses display:table-cell so this won't work in old IEs (<IE8).
Depending on the background, you could use the li-border solution and replace the solid colors on the span-elements with the background-image itself.

这篇关于用CSS添加虚线spacer / infill的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！