html - 如何将 CSS 点前导符用于 "three column"列表？

Question

我正在努力尝试让餐厅菜单的一部分在网站上正确显示。我正在使用在“双列”列表中完美工作的点领导者:例如

ITEM.......................PRICE
LONGER NAMED ITEM..........PRICE

使用以下内容:

CSS:

p.menu-item {
    overflow: hidden;
}

span.item {
    float: left;
    padding: 0 .2em 0 0;
    margin: 0;
}

span.price {
    float: right;
    padding: 0 0 0 .2em;
    margin: 0;
}

p.menu-item:after {
    content: "";
    display: block;
    overflow: hidden;
    height: 1em;
    border-bottom: 1px dotted;
}

HTML:

<p class="menu-item"><span class="item">ITEM</span><span class="price">PRICE</span></p>
<p class="menu-item"><span class="item">LONGER NAMED ITEM</span><span class="price">PRICE</span></p>

但我有几套商品有两个价格。

例如

item..........price 1.....price2
item2.........price 1.....price2

我只能在网上找到让我做单价商品的帮助。我玩弄了 http://jsfiddle.net/vkDgJ/17/但似乎无法得到它。

有什么建议吗？

编辑:我还应该提到我的页面有一个带纹理的背景图像，所以使用背景颜色来隐藏虚线边框，如下面的 Coma 的回答是行不通的。

Answer 1

第二个想法 ( http://jsfiddle.net/coma/wrwwn/2/ ) 更好，因为点不会在列之间重叠。

HTML

<div class="dotted">
    <div>
        <div>
            <span>item</span>
         </div>
        <div>
            <span>price 1</span>
         </div>
        <div>
            <span>price2</span>
         </div>
     </div>
    <div>
        <div>
            <span>item2</span>
         </div>
        <div>
            <span>price 1</span>
         </div>
        <div>
            <span>price2</span>
         </div>
     </div>
</div>

CSS

div.dotted > div:after {
    content: "";
    display: block;
    clear: both;
}

div.dotted > div > div {
    position: relative;
    float: left;
    width: 33.333333%;
}

div.dotted > div > div:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 1px dotted #000;
    z-index: -1;
}

div.dotted > div > div:last-child:before {
    display: none;
}

div.dotted > div > div > span {
    padding: 0 5px;
    display: inline-block;
    background-color: #fff;
}

http://jsfiddle.net/coma/wrwwn/

价格右对齐

div.dotted > div {
    position: relative;
}

div.dotted > div:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 1px dotted #000;
    z-index: -1;
}

div.dotted > div:after {
    content: "";
    display: block;
    clear: both;
}

div.dotted > div > div {
    float: left;
    width: 33.333333%;
}

div.dotted > div > div + div {
    text-align: right;
}

div.dotted > div > div > span {
    padding: 0 5px;
    display: inline-block;
    background-color: #fff;
}

http://jsfiddle.net/coma/wrwwn/2/

使用固定背景

div.dotted > div > div > span,
html {
    background: #F4EAEC url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3949/3949452.png?1382901481) 0 0 fixed;
}

http://jsfiddle.net/coma/wrwwn/4/

复杂

html {
    background: #F4EAEC url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3949/3949452.png?1382901481) 0 0 fixed;
}

div.dotted div {
    height: 2em;
}

div.dotted > div div {
    float: left;
    width: 50%;
    position: relative;
    overflow: hidden;
}

div.dotted span {
    display: block;
    position: absolute;
    padding: 0 5px;
}

div.dotted span:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    width: 1000px;
    border-top: 1px dotted #000;
}

div.item span {
    left: 0;
}

div.item span:after {
    left: 100%;
}

div.prices span {
    right: 0;
}

div.prices span:after {
    right: 100%;
}

http://jsfiddle.net/coma/wrwwn/6/