如何使两个并排的按钮之间有边距，其总宽度等于前面的文本输入（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)?如何使两个并排的按钮之间有边距，其总宽度等于前面的文本输入（100% 宽度）？
【发布时间】：2016-08-29 03:23:40
【问题描述】：

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

如何正确指定每个按钮的宽度，并在其间保持不变？

等宽按钮在我尝试一起缩放的下方，但不超过总宽度。

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

这是我目前所拥有的......

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

【问题讨论】：

我认为这可能需要更多上下文。例如，我想念您是否在任何元素上定义了box-sizing；影响事物。那么你能创建一个minimal reproducible example 来演示这个问题吗？最好作为 stacksn-p。
@Vahe 我们可以给你一些 html 内容吗？
是的，我需要一些时间来创建演示。
mixin 的第三行你有$form-conrol 而不是$form-control
@Mi-creativity，谢谢你的收获。我会做出改变。我几乎准备好了最小可验证示例。

标签： html css

【解决方案1】：

Flexbox 可以做到这一点。

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

【讨论】：

【解决方案2】：

这是我对您的回答的锻炼。不确定它是否是您想要的方式，所以请告诉我。谢谢。

您可以参考这个链接：https://jsfiddle.net/2g5unL8y/4/

另请参阅此链接，了解在最小窗口查看时在中间没有空格的不同大小调整：https://jsfiddle.net/jeemo0yu/

CSS：

*{ box-sizing: border-box;}

input {
width: 50%; 
height: auto;
margin: 10px;
}

#new {
float: left;
max-width: 30%;
overflow: hidden;
}

#old {
float: right;
max-width: 30%;
overflow: hidden;
}

div {
width:50%;
margin: 10px;
text-align: center;
}

HTML：

<input type="text"><br>
<div>
<button id="new">Click Me!</button>
<button id="old">Click Me!</button> 
</div>

【讨论】：

谢谢 Sazz，这很好用，但有一点需要注意。它似乎将按钮堆叠在非常窄的视图端口上。我希望按钮保持内联，而不是相互堆叠。
更新了答案和链接。请检查它是否有任何好处。谢谢。
谢谢萨兹。我需要进行一些修改以使按钮更宽一些，但我确实看到没有换行。
是的，欢迎您。请检查提供的第二个链接

【解决方案3】：

向左浮动两个按钮：float: left，然后给第二个按钮一个margin-left：

body {
  font-family: Gothamroundedmedium;
}

.create-password {
  text-align: center;
}

.create-password .form-horizontal .form-group {
  white-space: nowrap;
}

.create-password .form-horizontal .form-group .form-control {
  border-radius: 0;
  border: none;
  box-shadow: none !important;
  background-color: #f5f5f5;
  margin-bottom: 5px;
  height: 38px;
}

.create-password .form-horizontal .form-group .back-btn {
  background-color: white;
  color: #001b24;
  font-size: 14px;
  border: 2px solid #49dce0;
  padding-top: 10px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
}

.create-password .form-horizontal .form-group .next-btn {
  background-color: #49dce0;
  color: #001b24;
  font-size: 14px;
  border: 2px solid #49dce0;
  padding-top: 10px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
}

.back-btn {
  float: left;
  background-color: white;
  color: #001b24;
  font-size: 14px;
  border: 2px solid #49dce0;
  padding-top: 10px;
  padding-right: 50px;
  padding-bottom: 10px;
  padding-left: 50px;
  width: 30%;
  display: inline-block;
}

.next-btn {
  float: left;
  margin-left: 40%;
  background-color: #49dce0;
  color: #001b24;
  font-size: 14px;
  border: 2px solid #49dce0;
  padding-top: 10px;
  padding-right: 50px;
  padding-bottom: 10px;
  padding-left: 50px;
  width: 30%;
  display: inline-block;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row create-password">

    <div class="row">
      <form class="form-horizontal col-xl-6  col-xl-offest-2                                    col-lg-10 col-lg-offset-1                                    col-md-10 col-md-offset-1                                    col-sm-10 col-sm-offset-1                                    col-xs-10 col-xs-offset-1 ng-pristine ng-valid">
        <div class="form-group">
          <input class="form-control" placeholder="Password" value="" type="password">
          <input class="form-control" placeholder="Confirm password" value="" type="password">
          <button class="back-btn" type="button" name="button">BACK</button>
          <button class="next-btn" type="button" name="button">NEXT</button>
        </div>
      </form>
    </div>
  </div>

【讨论】：

【解决方案4】：

在第一个元素上使用边距的可能解决方案

.buttonscontainer {
  width: 100%;
  background-color: hsl(38, 100%, 84%);
  font-size: 0;
}
.buttons {
  display: inline-block;
  width: 33.33%;
  text-align: center;
  background-color: hsl(0, 0%, 60%);
  font-size: 20px;
}
.buttons:first-child {
  margin-right: 33.33%;
}

<div class="buttonscontainer">
  <div class="buttons">Button 1</div>
  <div class="buttons">Button 2</div>
</div>

小提琴

https://jsfiddle.net/Hastig/hgcLpds0/4/

使用幻像按钮作为分隔符的一种可能的 flexbox 解决方案

.buttonscontainer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  border: 1px solid hsla(0, 0%, 0%, 0.4)
}
.buttons:nth-child(2) {
  visibility: hidden;
}

<div class="buttonscontainer">
  <div class="buttons">Button 1</div>
  <div class="buttons">u cant see me</div>
  <div class="buttons">Button 2</div>
</div>

小提琴

https://jsfiddle.net/Hastig/hgcLpds0/

使用浮点数的可能解决方案

.buttonscontainer {
  width: 100%;
  background-color: hsl(38, 100%, 84%);
  overflow: auto;
}
.buttons {
  display: flex;
  justify-content: center;
  width: 33.33%;
  background-color: hsl(0, 0%, 60%);
}
.buttons:first-child {
  float: left;
}
.buttons:last-child {
  float: right;
}

<div class="buttonscontainer">
  <div class="buttons">Button 1</div>
  <div class="buttons">Button 2</div>
</div>

小提琴

https://jsfiddle.net/Hastig/hgcLpds0/1/

【讨论】：