INPUT自動填充容器寬度的其餘部分

Question

我正在尋找把我的輸入字段擴展到容器的所有可用空間但不能覆蓋folowing元素的技巧。 我準備了example女巫看起來只有鉻。 FF看起來相當不錯，但在IE中沒有結果。

我有容器DIV INPUT和文本（SPAN）在一行。文本可以改變（例如翻譯），所以我不知道文本的寬度。在我的例子中，我使用了display: table-cell，請看我的example。

+----container---------------------------+ 
|+---input----------------++--text------+| 
||      ||   || 
|+------------------------++------------+| 
+----------------------------------------+ 

Answer 1

我從完全從頭開始做這個

Demo

<div class="container"> 
    <label>Demo</label> 
    <span><input type="text" /></span> 
</div> 

CSS

#container { 
    display: table; 
    width: 100%; 
} 

label, span { 
    display: table-cell; 
} 

span { 
    width: 100%; 
    padding: 5px; 
} 

input { 
    width: 100%; 
}