Question

我有下一个html结构：

<div class="offerButtons">
  <button type="reset" class="btnReset"><span> No </span></button>
  <input type="text" class="offerInput" />
  <button type="submit" class="btnSubmit"><span> Yes </span></button>
</div>

我的css如下：

.offerButtons {
    display: table;
    width: 100%;
    background-color: yellow;
}

.btnReset, .btnSubmit {
  border: 1px solid red;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: table-cell;
  text-align: center;
  vertical-align: middle; 
}

.btnReset span, .btnSubmit span{
   color: red;
}

.offerInput {
  height: 31px;
  margin: 0 5px;
  display: table-cell;
}

btnReset和btnSubmit有一个固定的宽度。我想要的是这两个按钮具有固定的宽度，并且inout字段占据宽度的其余部分。

我希望得到类似的内容：

但是现在，通过这段代码，我得到了：

有什么想法吗？

这是jsfiddle

Answer 1

您也可以使用css3 flexbox。以下css会使它像你想要的那样：

.offerButtons {
  align-items: center;
  display: flex;
  width: 500px;
}
.offerInput {
  flex-grow: 1;
}

＆＃13;

.offerButtons {
  align-items: center;
  display: flex;
  width: 500px;
  background-color: yellow;
}

.btnReset, .btnSubmit {
  border: 1px solid red;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
}

.btnReset span, .btnSubmit span{
  color: red;
}

.offerInput {
  height: 31px;
  text-indent: 15;
  margin: 0 5px;
  flex-grow: 1;
}

＆＃13;

<div class="offerButtons">
  <button type="reset" class="btnReset"><span> No </span></button>
  <input type="text" class="offerInput" />
  <button type="submit" class="btnSubmit"><span> Yes </span></button>
</div>

＆＃13;

但是如果你对flexbox感到不舒服，那么另一种方法几乎适用于大多数浏览器。

＆＃13;

.offerButtons {
  background-color: yellow;
  position: relative;
  padding: 0 40px;
}

.btnReset, .btnSubmit {
  transform: translateY(-50%);
  position: absolute;
  border: 1px solid red;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  left: 3px;
  top: 50%;
}
.btnSubmit {
  left: auto;
  right: 3px;
}

.btnReset span, .btnSubmit span{
  color: red;
}

.offerInput {
  height: 31px;
  display: block;
  width: 100%;
}

＆＃13;

<div class="offerButtons">
  <button type="reset" class="btnReset"><span> No </span></button>
  <input type="text" class="offerInput" />
  <button type="submit" class="btnSubmit"><span> Yes </span></button>
</div>

＆＃13;

Answer 2

您可以使用css calc()function，如下所示，减去“{1}}”中的“是”和“否”按钮的宽度。

.offerInput

.offerButtons {
    display: table;
    width: 100%;
    background-color: yellow;
}

.btnReset, .btnSubmit {
  border: 1px solid red;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: table-cell;
  text-align: center;
  vertical-align: middle; 
}

.btnReset span, .btnSubmit span{
   color: red;
}

.offerInput {
  height: 31px;
  text-indent: 15;
  margin: 0 5px;
  display: table-cell;
  width:calc(98% - 70px);
 }

Answer 3

我还建议将flexbox作为一个很好的选择。只需将flex放在父div上，并将offerInput的宽度设置为100％，就可以了。如果我错了，请纠正我，但我不认为flex会成长。

Answer 4

这是一个单线解决方案，通过calculating按钮的宽度设置输入字段的自定义宽度：

.offerInput {
    height: 31px;
    margin: 0 5px;
    display: table-cell;
    width: calc(500px - 75px);
}

还有很多其他可能的方法，包括采用任何前端框架，例如Bootstrap或Zurb Foundation，尤其是在设计完整的网络视图时。

中间div占用剩余宽度

4 个答案: