CSS使固定宽度项目旁边的输入宽度响应不使用flexbox

Question

How can I use CSS to make an input flexible while next to 2 fixed width buttons?

I have 2 buttons which are fixed width, next to an input on the same row which I need to be flexible and always consume the rest of the space available in that row.

Needs to be supported by most browsers back to IE10 era.

I have attached a screenshot below to illustrate what I mean.

You can view the site here: http://helenshill.com.au/beta3/shop/

HTML markup:

<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

The code below works by using display:table instead of flexbox, this will adjust to the size of the contents, so by making the 2 buttons a fixed width, the rest of the space will be allocated to the input and will change wit hthe screen size.

Working Snippet:

  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> 

Snippet with your HTML
Note that you need to add a container element around your textbox, but thats the only change required for the HTML.
Also, the + and - don't show here because I don't have whatever library you are using.

 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>