为菜单创建点头

Question

我正在尝试创建一个带有点头的菜单，我遇到了麻烦。

我正在寻找的格式是下面张贴的图片。

有人可以帮帮我吗？

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

提前致谢！

Answer 1

将每个组的第一行包装在您制作Flex容器的div中，并使用以下设置。第二行（成分）位于该容器之外，可以是一个简单的段落，也可以是具有底部边距的DIV。

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

Answer 2

使用带有虚线（或虚线或任意）边框的伪元素绘制点并使用z-index将其放置在文本后面，并为文本提供背景颜色，以使点不会渗透。

li {
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: baseline;
}
li:before {
  border-bottom: 1px dashed #333;
  content: '';
  position: absolute;
  bottom: 4px; left: 0; right: 0; top: 0;
  z-index: -1;
}
span {
  background: #fff;
  padding: 0 .5em
}

<ul>
  <li><span>Quail</span> <span>9.9</span></li>
  <li><span>Quail</span> <span>9.9</span></li>
</ul>

Answer 3

body{
    background: #fff;
}
.wrapper{
  width:500px;
  margin: 10px auto;
}
ul{
  list-style:none;
  padding: 0;
}
li{
  width: 100%;
  margin-bottom: 10px;
}

.line {
  border-bottom: 1px dashed #000;

}
span{
  float: right;
}

span, strong{
  position:relative;
  background: #fff;
  z-index: 1;
  top: 5px;
  padding: 0 0 1px;
}

.description{
  margin-top: 2px;
}

<div class="wrapper">
  <ul>
  <li><div class="line"><strong>My product</strong><span>Price</span></div><div class="description">My description</div></li>
   <li><div class="line"><strong>My product</strong><span>Price</span></div><div class="description">My description</div></li>
    <li><div class="line"><strong>My product</strong><span>Price</span></div><div class="description">My description</div></li>
</ul>
</div>