INPUT自动填充容器宽度的其余部分

Question

我正在寻找将输入字段扩展到容器的所有可用空间但不会超过以下元素的技巧。 我准备了example女巫只有镀铬。 FF看起来很不错，但IE没有结果。

我在一行中有INPUT和text（SPAN）的容器DIV。文本可以更改（例如翻译），所以我不知道文本宽度。在我使用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%;
}