为餐厅菜单创建点前导答案

【问题标题】：Creating Dot Leaders for Restaurant Menu为餐厅菜单创建点前导
【发布时间】：2021-04-13 04:52:33
【问题描述】：

我正在尝试使用 dot leader 创建餐厅菜单，但遇到了麻烦。

我要找的格式是下面贴的图片。

有人可以帮我解决这个问题吗？

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&#37;;
    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;
}

提前致谢！

【问题讨论】：

你有代码吗？
这是 2009 年的，但它可以满足您的需求：webdesignerwall.com/tutorials/css-menu-list-design

标签： html css

【解决方案1】：

将每个组的第一行包装在您制作弹性容器的 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>

【讨论】：

这对我来说几乎是完美的，但我有一个小问题。 pasteboard.co/rjti1WzeV.png成分居中居中，我正在尝试将其推到屏幕左侧。
似乎你周围有一些其他元素有text-align: center（或类似的东西）
我确实有 text-align: center 在 div 的其他部分，与这个分开。是否有可能会影响这个 div 的这一部分？
好吧，那就把text-align: left;加到.ingredients
谢谢，现在一切都完美了！

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：