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>

Answer 2

如果您真的关心IE和其他旧浏览器：

.addToCardButton {
    width: 370px;
    background-color: yellow;
    position: relative;
    height: 30px
}

.offerButtons {
    width: 100%;
    position: relative;
}

.input-wrapper {
    width: 100%;
    padding-left: 31px;
    padding-right: 35px;
    box-sizing: border-box;
}

.btnReset {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0;
    top: 0;
}

.btnSubmit {
    width: 30px;
    height: 30px;
    right: 0;
    top: 0;
    position: absolute;
}

.offerInput {
    height: 24px;
    width: 100%;
}

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

Answer 3

您也可以更改HTML吗？处理width的{{1}}，margin和padding比input更难，所以我的建议是将div换成另一个input获取所需的div，然后设置width 100％宽度。这样的事情。

input

.addToCardButton{
  width: 370px;
  background-color: yellow;
  position: relative;
  height: 30px
}
.inputContainer{
  padding: 0 38px 0 0px;
  position:absolute;
  left:35px;
  right:0;
}
.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:relative;
 width: 100%;
 height: 24px;
}

和小提琴：https://jsfiddle.net/Lnb0edp2/1/

Answer 4

.offerButtons没有高度，这就是位置相对没有取宽度或高度的原因。尝试制作height:100%。看到这个小提琴。 https://jsfiddle.net/723x7nq0/4/

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

.offerInput{
    position: absolute;
    left: 0;
    right: 0;
    width: 80%;
    margin: 0 auto;
    height: 24px;
}

绝对定位的div不会占据宽度的其余部分

4 个答案: