代码之家 › 专栏 › 技术社区 › Boky

中间分隔带占用剩余宽度

css html

Boky · 技术社区 · 9 年前

我有下一个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

4 回复 | 直到 9 年前

Mohammad Usman 9 年前

您可以使用css3 flexbox 也下面的css将使其符合您的要求:

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

.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;
}

<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>

然而,如果你不舒服 柔性箱 这里有另一种方法,几乎可以在大多数浏览器中使用。

.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%;
}

<div class=“offerButtons”>
<按钮类型=“重置”类=“btnReset”>&书信电报;span>否</span></按钮>
<输入类型=“文本”类=“offerInput”/>
<按钮类型=“提交”类=“btnSubmit”>&书信电报;span>是</span></按钮>
</div>

frnt 9 年前

你可以利用 css calc()function ,如下所示,减去“是”和“否”按钮的宽度 .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);
 }

<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>

Kristoffer Lund 9 年前

我也推荐flexbox作为一个好的选择。只需将flex放在父div上,并将offerInput的宽度设置为100%,就可以了。如果我错了,请纠正我,但我不认为flex grow是必要的。

-1

Adil 9 年前

这里有一个单行解决方案,通过设置输入字段的自定义宽度 calculating 按钮的宽度:

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

有许多其他可能的方法可以做到这一点,包括采用任何前端框架,如 Bootstrap 或 Zurb Foundation 特别是在设计完整的web视图时。