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