如何使两个并排按钮之间的边距具有等于前文输入(100％宽度)的总宽度? [英] How do I make two side by side buttons with margin in between have a total width equal to the precedding text input (100% width)?

问题描述

我正在尝试在两个边距响应设计之间适当地缩放两个按钮.

I am trying to make two buttons scale appropriately with in between margin responsive design.

如何正确指定每个按钮的宽度和边距，使它们之间保持恒定?

How do I properly specify width of each button with the margin to stay constant in between?

等宽按钮低于我要尝试缩放的比例，但不超过总宽度.

Equal width buttons are below that I am trying to scale together, without exceeding the total width.

|--------------------100%------------------------|
|---Button 1---||--margin in px--||---Button 2---|

这是我到目前为止所拥有的.

Here is what I have so far..

  button1.back-btn {
      @include btn-inline;
    }
 button2.next-btn {
      @include btn-inline;
    }

@mixin btn-inline{
  width: calc(50% - $form-control-spacing/2 - $border-btn-width*2);
  width: -webkit-calc(50% - $form-control-spacing/2 - $border-btn-width*2);
  width: -moz-calc(50% - $form-conrol-spacing/2 - $border-btn-width*2);
  display: inline-block;
}

推荐答案

Flexbox可以做到这一点.

Flexbox can do that.

* {
  box-sizing: border-box;
}
.wrap {
  width: 80%;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid pink;
}
.wide {
  flex: 0 0 100%;
}
button:first-of-type {
  margin-right: 2em;
}
button {
  flex: 1;
}

<div class="wrap">
  <input class="wide" type="text" />
  <button>Button 1</button>
  <button>Button 2</button>
</div>

这篇关于如何使两个并排按钮之间的边距具有等于前文输入(100％宽度)的总宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！