中div占用剩余寬度

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

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

但是，如果您對flexbox這是另一種方法，幾乎​​可以在大多數瀏覽器中使用。

 .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"> <button type="reset" class="btnReset"><span> No </span></button> <input type="text" class="offerInput" /> <button type="submit" class="btnSubmit"><span> Yes </span></button> </div> 

Answer 2

您可以使用css calc()function ，如下所示從.offerInput減去yes和no按鈕的寬度。

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

Answer 3

我還將在這里推薦flexbox作為一個不錯的選擇。 只需將flex放在父div上，並將offerInput的寬度設置為100％，就可以了。 如果我錯了，請糾正我，但我認為沒有必要進行彈性增長。

Answer 4

這是通過計算按鈕的寬度來設置輸入字段的自定義寬度的一種解決方案：

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

還有許多其他可能的方法，包括采用任何前端框架（如Bootstrap或Zurb Foundation），尤其是在您設計一個完整的Web視圖時。