Question

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

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

等宽按钮位于我试图缩放的位置，不超过总宽度。

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

Answer 1

Flexbox可以做到这一点。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

在第一个元素上使用保证金的可能解决方案

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

Answer 4

向左浮动两个按钮：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>

如何制作两个带有边距的并排按钮，其总宽度等于预先输入的文本输入（100％宽度）？

4 个答案: