html - 绝对定位的 div 不会占据剩余的宽度

Question

我有这样的 html :

<div class="addToCardButton">
  <div class="offerButtons">
    <button type="reset" class="btnReset">R</button> 
    <input type="number" inputmode="numeric" placeholder="Your offer..." class="offerInput">
    <button type="submit" class="btnSubmit">S</button>
  </div>
</div>

css如下:

.addToCardButton{
  width: 370px;
  background-color: yellow;
  position: relative;
  height: 30px
}

.offerButtons{
  width: 100%;
  position:relative;
}

.btnReset, .btnSubmit, .offerInput{
  position: absolute;
}

.btnReset{
  width: 30px;
  height: 30px;
  left: 0;
}

.btnSubmit{
  width: 30px;
  height: 30px;
  right: 0;
}

.offerInput{
 position:absolute;
 left: 35px;
 right: 35px;
 height: 24px;
}

因此，我想要的是按钮具有固定宽度 (30px)，而输入占用其余宽度。

我试着用绝对位置来做，但我得到了这样的结果:

但我想要这样的东西:

因此在我的例子中，输入不占用剩余的宽度。我做错了什么？

我也试过

width: calc(100% - 70px);

这在所有优秀的浏览器中都有效，但在 Edge 和 IE 中无效。

这里是 fiddle .

Answer 1

使用 Flexbox 你甚至可以简化和优化你的代码如下

HTML

<div class="addToCardButton">
    <button type="reset" class="btnReset">R</button>
    <input type="number" inputmode="numeric" placeholder="Your offer..." class="offerInput">
    <button type="submit" class="btnSubmit">S</button>
</div>

CSS

.addToCardButton {
  width: 370px;
  background-color: yellow;
  height: 30px;
  display: flex;
}

.btnReset,
.btnSubmit {
  width: 30px;
  height: 30px;
}

.offerInput {
  height: 24px;
  width: 100%;
  margin: 0 10px;
}

.addToCardButton {
  width: 370px;
  background-color: yellow;
  height: 30px;
  display: flex;
}
.btnReset,
.btnSubmit {
  width: 30px;
  height: 30px;
}
.offerInput {
  height: 24px;
  width: 100%;
  margin: 0 10px;
}

<div class="addToCardButton">
  <button type="reset" class="btnReset">R</button>
  <input type="number" inputmode="numeric" placeholder="Your offer..." class="offerInput">
  <button type="submit" class="btnSubmit">S</button>
</div>