Html 我如何使用CSS点引线来表示一个；“三栏”；列表

我正在努力让餐厅菜单的一部分在网站上正确显示。我使用的点引线在“两列”列表中工作完美： e、 g

使用以下命令：

CSS:

HTML:

我只能在网上找到帮助，让我做单一价格的项目。我和他一起玩过，但似乎就是弄不懂

有什么建议吗

编辑：我还应该提到，我的页面有一个纹理背景图像，因此使用背景色来隐藏虚线边框（如Coma在下面的回答中所述）不起作用。

第二个想法（）更好，因为点不会在列之间重叠

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>

价格向右对齐

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

使用固定背景

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

复杂

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

---

感谢coma在他给出的“复杂”示例中所做的出色工作。他的答案应该是选定的。我会简单地加上这个作为回答，但我没有这个选择

我已经改进了他的复杂示例，以便考虑一些事情

首先，如果你把菜单放在一个较小的空间里，你会注意到coma的代码开始有一些缺陷。div设置为50%，因此，如果项目的名称超过该值，则最终会将其截断（它实际上是包装的，并且是隐藏的，这是有意的）。我用80/20的测量值修正了这个问题。这或多或少只是一个问题，如果你想拿走两个价格中的一个。如果你只想要一个呢？（当然，我没有看过科玛的其他例子……也许他做的比我的更好）

此外，我的工作需要在一些项目中有一个描述行……所以我也在其中添加了描述行

周围都有小的调整。抱歉，如果我把它进一步复杂化了…但我实际上无法完全理解为什么他的示例仍然有效（嗯…我理解90%）

如果您对此表示感谢，那么只需添加一条评论即可。科马应该赢得这场比赛

您可以在此处找到我的代码：

CSS:

以下是标记：

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

味噌汤
$1.50
描述性知识

我试过了。我真的以为这会管用的，昏迷。不幸的是，我在页面上有一个纹理背景图像，所以我不能使用背景色，并且边框穿过文本。我试图把同一个背景图像作为我的网页，但它是这样一个随机模式，有一个明显的矩形设置它。我已经编辑了我的原始文章，以反映纹理背景。好吧，在我完成另一篇文章时，尝试一下背景固定的想法。它将与背景完美配合：url（“链接到图像”）无重复固定中心顶部rgba（0，0，0，0）。我不知道为什么我以前一直在想这个问题。谢谢你的帮助。

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

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

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

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

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>