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>

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

谢谢！

Answer 1

我可以通过使用定义列表（fiddle）来实现：

HTML：

<div id="wrap">
    <div class="inner">
        <dl>
            <dt>$2.89</dt>
            <dd><em>Lorem ipsum dolor sit amet </em></dd>
        </dl>
        <dl>
            <dt>$21.89</dt>
            <dd><em>In porta nisl id nisl varius ullamcorper</em></dd>
        </dl>
        <dl>
            <dt>$5.99</dt>
            <dd><em>Suspendisse augue mauris, mattis ac, commodo quis, lobortis vel, mauris. Etiam dolor neque, iaculis sit amet, tincidunt nec, elementum ut, lorem.</em></dd>
        </dl>
        <dl>
            <dt>$8.99</dt>
            <dd><em>Donec sed felis sit amet risus</em></dd>
        </dl>
        <dl>
            <dt>$11.50</dt>
            <dd><em>Maecenas ante. Suspendisse pharetra, metus in tempus egestas, purus ante pellentesque purus, at gravida metus elit nec nunc. Etiam ante ligula, porttitor et, euismod commodo, pulvinar id, pede. Curabitur et magna. Vestibulum leo nibh, viverra sed, imperdiet non,</em></dd>
        </dl>
        <dl>
            <dt>$5.99</dt>
            <dd><em>Etiam ante ligula,</em></dd>
        </dl>
        <dl>
            <dt>$5.99</dt>
            <dd><em>Fusce condimentum</em></dd>
        </dl>
        <dl>
            <dt>$7.55</dt>
            <dd><em>Morbi nibh velit, sodales eu</em></dd>
        </dl>
        <dl>
            <dt>$6.50</dt>
            <dd><em>Etiam ante ligula,</em></dd>
        </dl>
        <dl>
            <dt>$11.50</dt>
            <dd><em>Fusce condimentum</em></dd>
        </dl>
        <dl>
            <dt>$2.50</dt>
            <dd><em>Morbi nibh velit, sodales eu</em></dd>
        </dl>
        <dl>
            <dt>$21.50</dt>
            <dd><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></dd>
        </dl>
    </div>
</div>

CSS：

* {margin:0;padding:0}
h1,h2{padding:10px 20px 0}
#wrap{
    width:500px;
    border:1px solid #eff2df;
    margin:20px 20px;
    background:#809900;
}
* html #wrap {width:502px;w\idth:500px;}
#wrap .inner{
    padding:20px 40px;
    border:1px solid #4c7300;
    position:relative;
    left:-2px;
    top:-2px;
    background:#eff2df;
    color:#4c7300;
    width:418px;
}
* html #wrap .inner{width:500px;w\idth:418px;}
#wrap dl{
    position:relative;
    width:100%;
    border-bottom:1px solid #eff2df;
}
#wrap dd{
    line-height:1.2em;
    position:relative;
    padding:0 5em 0 0;
    text-align:left;
    border-bottom:1px dotted #000;
    clear:both;
    margin:0 0 .4em 0;
    min-height:0;
}
* html #wrap dd{
    border:none;
    background: url(images/dotted-leader.gif) repeat-x left bottom;
    height:1%;
}
#wrap dt{
    background:#eff2df;
    padding:1px 0 1px 5px;
    color:#809900;
    position:absolute;
    bottom:0px;
    right:-1px;
    z-index:99;
}
#wrap dd em{
    margin:0 ;
    position:relative;
    top:.25em;
    padding:0 5px 0 0;
    background:#eff2df;
}

Reference Link

Answer 2

我会选择这样的东西：

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

好的副作用 - 你不需要浮动元素。但是，此解决方案使用display:table-cell，因此这在旧IE（＆lt; IE8）中不起作用根据背景，您可以使用li-border solution并将span-elements上的纯色替换为background-image本身。

使用CSS添加虚线spacer / infill

2 个答案: