html - INPUT 自动填充剩余的容器宽度

Question

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

我有一个包含 INPUT 和文本 (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%;
}