Question

我正在努力尝试将一部分餐馆菜单正确显示在网站上。我正在使用在“双列”列表中工作完美的点头： e.g。

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>

但是我有几套有两种价格的物品。

e.g。

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/

Answer 2

感谢昏迷，因为他在“复杂”的例子中给出了令人敬畏的工作。他的回答应该仍然是选定的。我会简单地在回复中添加这个，但我没有这个选项。

我已经改进了他的复杂例子以允许一些事情。

首先，如果您的菜单位于较小的空间内，您会发现昏迷的代码会开始出现一些缺陷。 div被设置为50％，因此如果你的项目的名称超过了那个，那么你最终将它切断（它实际上是包装，并且是隐藏的，这是故意的）。我用80/20测量来修复它。如果您想要取走两个价格中的一个，这或多或少只是一个问题。如果你只想要一个怎么办？（当然，我没有看过昏迷的其他例子......可能他的版本比我的好。）

另外，我的工作需要在某些项目中有一个描述行...所以我也在那里添加了。

周围的小调整。对不起，如果我进一步复杂...但我实际上无法完全理解为什么他的例子仍然有用（好吧......我理解90％）。

如果感激，那么只需添加评论即可。昏迷应该赢得这场胜利。

您可以在此处找到我的代码：http://jsfiddle.net/tFK68/1/

CSS：

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

ul.dotted li, ul.dotted div {
height: inherit;
list-style-type: none;
}

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

.dotted div.item {
width: 80%;
}

.dotted div.prices {
width: 20%;
overflow: visible;
}

.dotted div.item, .dotted div.prices {
height: 1em;
font-weight: bold;
}

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

ul.dotted span:after {
content: "";
display: block;
position: absolute;
top: 67%;
width: 1000px;
border-top: 2px dotted #000;
}

div.item span {
left: 0;
}

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

div.prices span {
right: 0;
width: 80%;
}

div.prices div {
width: 100% !important;
}

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

ul.dotted p {
padding: 0px 10px 0px;
clear: both;
margin-bottom: 0;
}

这是标记：

<ul class="dotted">
<li>
    <div class="item">
        <span>Miso Soup</span>
     </div>
    <div class="prices">
        <div>
            <span>$1.50</span>
         </div>
     </div>
    <p>Descriptive lorem ipsum dolor.</p>
</li>
</ul>

如何将CSS点引线用于“三列”列表？

2 个答案: