对齐3列，中列HR可调

Question

我有这一节：

​

​

我想要实现的是，让左边的跨度在右边有一个垫子，然后在人力资源的中间，在右边的跨度和价格之间，但是我想让价格与右边对齐，使人力资源可调，所以它总是以价格结束，在第一个跨度之后开始。不管我怎么努力，我都无法做到这一点。

以下是代码：

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

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>

​

Answer 2

玩一点点你的代码，

最后我得到了这个：

​

.ementaspan {
  display: flex;
  width: 100%;
  text-align: left !important;
}

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

.ementaspan .span2 {
  flex: auto;
  padding: 20px; /* Instead of padding on span1 and span3 */
}

.ementaspan hr {
  background: none;
  color: transparent;
  border: 0; /* Resets hr style */
  border-bottom: 4px dotted #f00;
}

.ementaspan .span3 {
  width: 25% !important;
  color: #f00;
}

<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 class="span2">
    <hr class="dotted border-accent-color separator-no-padding">
  </span>

  <span class="span3">
    <h5 class="font-150690 h5 font-weight-300"><span>1,60€</span></h5>
  </span>
</div>

<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 Nata</span></h5>
  </span>

  <span class="span2">
    <hr class="dotted border-accent-color separator-no-padding">
  </span>

  <span class="span3">
    <h5 class="font-150690 h5 font-weight-300"><span>2,60€</span></h5>
  </span>
</div>

<div class="ementaspan">
  <span class="span1">
    <h5 class="font-150690 h5 font-weight-600 text-color-118181-color" style="
    display:  inline-block;
"><span>Baunilha e Noz</span></h5>
  </span>

  <span class="span2">
    <hr class="dotted border-accent-color separator-no-padding">
  </span>

  <span class="span3">
    <h5 class="font-150690 h5 font-weight-300"><span>10,60€</span></h5>
  </span>
</div>

​

注意，我保留了所有的类和html结构。

唯一的HTML修改是span2类，

然后，您只需要复制/粘贴CSS来尝试它！

希望能帮上忙。