Question

我正在为餐馆做菜单，他们希望在菜单的最后一行有橙色线，这导致了价格。只有橙色线才能通过具有背景的文本完成所有操作。

这是链接：

http://abbababba.gosuuftw.com

谢谢！

Answer 1

Flexbox可以做到这一点：

＆＃13;

ul {
  list-style-type: none;
  width: 90%;
  margin: auto;
  padding: 0;
}

.list {
  display: flex;
  align-items: flex-end;
  margin-bottom: .5em;
}

.first {
  margin-right: 0.5em;
  color: #2B91AF;
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.price {
  text-align: right;
  flex: 0 0 4em;
  
}

.first:after {
  content: '';
  height: 1px;
  border-bottom: dashed 1px tomato;
  flex:1;

}

＆＃13;

<ul>
  <li class="list">
    <i class='first'>Porterhouse <br/>Steak:</i>
    <i class="price">$150.00</i> 
  </li>
  <li class="list">
    <i class='first'>Baked Potato:</i>
    <i class="price"> $5.00</i> 
  </li>
  <li class="list">
    <i class='first'>Side Salad</i>
    <i class="price"> $25.00</i> 
  </li>
  <li class="list">
    <i class='first'>Soft Drink</i>
    <i class="price"> $10.00</i> 
  </li>
</ul>

＆＃13;

Answer 2

Sandrina的解决方案非常好，但我只用

解决了我的问题

显示：直列重要

Answer 3

Flexbox不是最好的选择，因为它支持旧浏览器和safari / firefox上的一些bug ... 我会将:after移至li而不是<p>

li:after {
    content: " ";
    height: 1px; /*never use 0.x px. there is no "half pixels", NEVER.*/
    display: block;
    bottom: 0; /* make sure align to bottom */
    /* top: -13px; */
    /* background: #f26622; a line is better*/
    border-bottom: 1px dashed #f26622; /* your fancy dashed line*/
    width: 100%;
    position: relative;
}

：用背景翻阅我的文字

3 个答案: