html - 对齐 3 列，中间列 HR 可调

Question

我有这个部分:

我想要实现的是让左边的跨度，右边的填充，然后是中间的 HR，右边的跨度和价格，但我想让价格对齐向右，并使 HR 可调，因此它始终以价格结束并在第一个跨度之后开始。无论我如何尝试，我都无法实现这一目标。

代码如下:

    <div class="ementaspan"><span class="span1"><h5 class="font-150690 h5 font-weight-600 text-color-118181-color" style="
    display:  inline-block;
"><span>Creme de Baunilha</span></h5></span> <span><hr class="dotted border-accent-color separator-no-padding" style="width: 90%;border-top-width: 4px;"></span><span class="span3"><h5 class="font-150690 h5 font-weight-300"><span>1,60€</span></h5></span></div>

Creme de Nata 1,60€

还有 CSS:

.ementaspan span h5, .ementaspan hr {
    display: inline-block !important;
}


.ementaspan {
    text-align: left !important;
}

.ementaspan .span1 {
    width: 25% !important;
}

.ementaspan .span1 h5 {
    padding-right: 25px;
}

.ementaspan hr {
    width: 50% !important;
}
.ementaspan .span3 {
    width: 25% !important;
}

.ementaspan .span3 h5 {
    padding-left: 25px;
}

Answer 1

最简单的方法是用flex来做

.maindiv {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
}
.maindiv .div1 {
  padding-right: 20px;
}
.maindiv .div2 {
  flex: 1 1 auto;
}
.maindiv .div2 hr {
  height: 0;
  background: none;
  color: transparent;
  border-bottom: 3px dotted #f00;
  border-top: none !important;
  margin: 0 0 4px !important;
}
.maindiv .div3 {
  padding-left: 20px;
  color: #f00;
}

<div class="maindiv">
  <div class="div1">Creme de Baunilha</div>
  <div class="div2"><hr></div>
  <div class="div3">1,60€</div>
</div>
<div class="maindiv">
  <div class="div1">Creme de Nata</div>
  <div class="div2"><hr></div>
  <div class="div3">11,60€</div>
</div>
<div class="maindiv">
  <div class="div1">Baunilha e Noz</div>
  <div class="div2"><hr></div>
  <div class="div3">1,60€</div>
</div>
<div class="maindiv">
  <div class="div1">Baunilha e Cookies</div>
  <div class="div2"><hr></div>
  <div class="div3">121,60€</div>
</div>