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

回答1:

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>

回答2:

Here is my workout to your answer. Not sure if its the way you wanted, so please do let me know. Thanks.

You can refer to this link: https://jsfiddle.net/2g5unL8y/4/

Also refer to this link for a different resizing with no space in between when viewed at smallest window: 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>

回答3:

Float two buttons to left: float: left, then give the second button a 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:

Possible solution using margin on first element

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

fiddle

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

---

A possible flexbox solution using a ghost button as a separator

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

fiddle

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

---

Possible solution using floats

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

fiddle

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

来源：https://stackoverflow.com/questions/39188392/how-do-i-make-two-side-by-side-buttons-with-margin-in-between-have-a-total-width