为菜单创建点引线 [英] Creating Dot Leaders for Menu

问题描述

我正在尝试创建一个带有点引号的菜单，对此我遇到了麻烦.

I'm trying to create a menu with dot leaders and I'm having trouble with this.

我要寻找的格式是下面发布的图片.

The format I'm looking for is the picture posted below.

有人可以帮我吗?

HTML

<div class="dotted">
                        <ol>
                          <li>
                                <h2>Test</h2>
                                <p><span>Test 2</span><span class="price">$3.50(2) - $6.50(4)</span></p>
                            </li>   
                        </ol>
                        </div>

CSS

p { margin: 0 0 -5px 0; }

li { 
    width: 100%;
    position: relative;
    margin-bottom: 1em;
    border-bottom: 1px dotted #000; 
    list-style-type:none
}

span { 
    position: relative; 
    bottom: -1px;
    padding: 0 1px;
    background: #FFF;     
}

span.price { 
    position: absolute;
    right: 0; bottom: -6px;
}

提前谢谢！

推荐答案

在div中包装每个组的第一行，您将其创建为弹性容器并使用以下设置.第二行(成分)在该容器的外部，可以是一个简单的段落或具有一定底边距的DIV.

Wrap the first line of each group in a div that you make a flex container and use the following settings. The second line (ingredients) is outside of that container and can be a simple paragraph or DIV that has some bottom margin.

.linewrapper {
  display: flex;
  align-items: baseline;
}
.middle {
  border-bottom: 1px dotted #aaa;
  flex-grow: 1;
  margin: 0 5px;
}
.ingredients {
  color: #bbb;
  margin-bottom: 1em;
}

<div class="linewrapper">
  <div>
    QUAIL
  </div>
  <div class="middle"></div>
  <div>
     9.9
  </div>
</div>
<div class="ingredients">
  stuff, stuff, stuff...
</div>
<div class="linewrapper">
  <div>
    SEA TROUT
  </div>
  <div class="middle"></div>
  <div>
     26.9
  </div>
</div>
<div class="ingredients">
  stuff, stuff, stuff...
</div>

这篇关于为菜单创建点引线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！