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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用您的代码玩一点，

我最终得到了这个：

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，我保留了所有课程和html结构唯一的HTML修改是span2类，
那么你只需复制/粘贴CSS就可以试试！

我希望它有所帮助。

对齐3列，中间列HR可调

2 个答案: