5

我在一家餐馆网站上工作。该设计要求在菜单项和价格之间使用典型的虚线填充。我已经在网上搜索并弄乱了一个小时左右，似乎无法找到任何仅使用 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>

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

谢谢！

4

2 回答 2

4

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

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

参考链接

于 2012-07-26T07:51:35.523 回答
4

我会用这样的东西：

示例小提琴

它使用.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 解决方案并将 span-elements 上的纯色替换为 background-image 本身。

于 2012-07-26T08:12:20.850 回答