javascript - CSS 在不使用 flexbox 的情况下在固定宽度元素旁边使输入宽度响应

Question

如何使用 CSS 使输入灵活，同时靠近 2 个固定宽度的按钮？

我有 2 个固定宽度的按钮，在同一行的输入旁边，我需要灵活地使用它并始终占用该行中剩余的可用空间。

需要IE10时代的大部分浏览器支持。

我附上了下面的屏幕截图来说明我的意思。

您可以在此处查看站点:http://helenshill.com.au/beta3/shop/

HTML 标记:

<form class="cart-num" action="index.html" method="post">
  <input type="text" name="quantity" class="form-control input-number quantity" id="quantity-box" value="1" min="1" max="100">
  <span class="input-group-btn">
      <button id="minus-btn-small" type="button" class="quantity-left-minus quantity-increment btn btn-number" data-type="minus" data-field="">
        <span class="glyphicon glyphicon-minus"></span>
      </button>
  </span>
  <span class="input-group-btn">
      <button id="plus-btn-small" type="button" class="quantity-right-plus quantity-increment btn btn-number" data-type="plus" data-field="">
          <span class="glyphicon glyphicon-plus"></span>
      </button>
  </span>
</form>

Answer 1

下面的代码通过使用 display:table 而不是 flexbox 来工作，这将根据内容的大小进行调整，因此通过将 2 个按钮设置为固定宽度，其余空间将是分配给输入并将随屏幕大小而变化。

工作片段:

  section {
  width: 100%;
  display: table;
  padding: 1em 0 0;
}

div.col {
  display: table-cell;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  border: 1px solid #AAAAAA;
}

input {
  width: 100%;
  padding: .5em 1em;
  height: 40px;
  box-sizing: border-box;
  border: none;
}

.col.button {
  height: 40px;
  padding: 0 15px;
  text-align: center;
}

.button:hover {
  background: #EEEEEE;

<section>
  <div class="col">
    <input type="text" />
  </div>
  <div class="col button">+</div>
  <div class="col button">-</div>

</section>

使用您的 HTML 片段
请注意，您需要在文本框周围添加一个容器元素，但这是 HTML 所需的唯一更改。
此外，+ 和 - 不会在此处显示，因为我没有您正在使用的任何库。

form {
  width: 100%;
  display: table;
}

span.col {
  display: table-cell;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  border: 1px solid #AAAAAA;
}

input {
  width: 100%;
  padding: .5em 1em;
  height: 40px;
  box-sizing: border-box;
  border: none;
}

.input-group-btn {
  display: table-cell;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  border: 1px solid #AAAAAA;
}

button {
  height: 40px;
  width: 40px;
  padding: 0;
  text-align: center;
  display: block;
  background: #FFF;
  border: none;
  box-sizing: border-box;
  vertical-align: middle;
}

button:hover {
  background: #EEEEEE;
}

<form class="cart-num" action="index.html" method="post">
  <span class="col"> 
  <input type="text" name="quantity" class="form-control input-number quantity" id="quantity-box" value="1" min="1" max="100">
  </span>
  <span class="input-group-btn">
      <button id="minus-btn-small" type="button" class="quantity-left-minus quantity-increment btn btn-number" data-type="minus" data-field="">
        <span class="glyphicon glyphicon-minus"></span></button>
  </span><span class="input-group-btn">
      <button id="plus-btn-small" type="button" class="quantity-right-plus quantity-increment btn btn-number" data-type="plus" data-field="">
          <span class="glyphicon glyphicon-plus"></span>
  </button>
  </span>
</form>