所以我正在为一家餐厅建立一个网站，但我陷入了困境。我正在尝试在那里创建菜单。这个想法是将食物名称向左对齐，价格向右对齐，并用点填充它们之间的空白。像这样
汉堡...................................... 4.00 美元
XXL 汉堡...................................... $ 4.00
奶昔.................................. 4.00 美元
我找到了几种解决方案，仅当您的背景只有一种颜色且没有纹理时才有效。我们的想法是用点填充整行，并将名称/价格背景范围设置为与网站背景相同的颜色，这样点就不会显示。但我有一张背景图片。
我不会在这里发布我的代码，因为它并不重要或没有帮助。
有可能吗？不一定非要用 css，也可以用 JavaScript 来完成。
我有点晚了，但你可以很容易地用径向渐变来做到这一点：
.col {
display: inline-block;
vertical-align: top;
}
.names span {
width: 200px;
display: flex;
}
.prices span {
display: block;
text-align:right;
}
.names span:after {
content: "";
display: inline-block;
height: 1em;
flex-grow: 1;
background: radial-gradient(black 25%, transparent 25%) scroll repeat-x bottom left/5px 5px;
}
<div class='names col'>
<span>Hamburger</span>
<span>Hot Dogs</span>
<span>Superman Hamburger</span>
</div>
<div class='prices col'>
<span>$1.00</span>
<span>$0.50</span>
<span>$400.00</span>
</div>
JSFiddle 演示 http://jsfiddle.net/jacobgray/69t7rja0/3/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
