如何让按钮与框内联

Question

大家好我正在尝试创建一个简单的数量框，以便用户可以决定他们想要多少数量。

E.G：

但是我的按钮位于盒子的顶部和底部，所以它是：

- 
Box 
+

我试图使用display: inline; / inline block但没有运气，任何帮助都会很棒，我正在使用bootstrap 3。

HTML：

<div class="input-group plus-minus-input">
  <div class="input-group-button">
    <button type="button" class="button hollow circle" data-quantity="minus" data-field="quantity">
      <i class="fa fa-minus" aria-hidden="true"></i>
    </button>
  </div>
  <input class="input-group-field" type="number" name="quantity" value="0">
  <div class="input-group-button">
    <button type="button" class="button hollow circle" data-quantity="plus" data-field="quantity">
      <i class="fa fa-plus" aria-hidden="true"></i>
    </button>
  </div>
</div>

CSS：

.plus-minus-input {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.plus-minus-input .input-group-field {
  text-align: center;
  padding: 1rem;
}

.plus-minus-input .input-group-field::-webkit-inner-spin-button,
.plus-minus-input .input-group-field ::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.plus-minus-input .input-group-button .circle {

  padding: 0.25em 0.8em;
}

Answer 1

改变你这样的css

.plus-minus-input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.plus-minus-input .input-group-field {
    text-align: center;
    padding: .62em;
}
 .plus-minus-input .input-group-field::-webkit-inner-spin-button, .plus-minus-input .input-group-field ::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}
.plus-minus-input .input-group-button .circle {
    padding: 1.25em 1.8em;
    background: #ccc;
}

Answer 2

如果您使用的是Bootstrap，则可以将d-flex添加到父div中，例如<div class="input-group plus-minus-input d-flex">