html - 输入自动填充容器宽度的其余部分

Question

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

我在一行中有 INPUT 和文本 (SPAN) 的容器 DIV。文本可以更改（例如翻译），所以我不知道文本宽度。在我使用的示例中display: table-cell，请查看我的示例。

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

Answer 1

我从头开始做这个

演示

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