输入元素彼此相邻，覆盖整个容器宽度

【问题标题】：Input elements right next to each other, covering whole container width输入元素彼此相邻，覆盖整个容器宽度
【发布时间】：2012-09-03 18:18:38
【问题描述】：

这不是我写过的最不言自明的标题。

我正在尝试做的 (see this fiddle) 是让文本字段和按钮保持在右侧彼此相邻的位置（没有边距），并且右侧的按钮，以及覆盖按钮未占用的容器剩余宽度的 100% 的文本字段。即使调整了包含元素的大小，两者之间的关系也应该保持不变。

浏览器要求：IE9+、Firefox、Webkit

【问题讨论】：

标签： html css

【解决方案1】：

查看这个小演示：little link。代码非常自我解释，但基本思想如下：

<div class = "container">
    <div class = "cell">
        <input type="text" placeholder="Glee's awesome!" />
    </div>
    <div class = "cell" style = "width: 1px"> <!--make sure it's only large enough to fit the button-->
        <button type="submit">Glee</button>
    </div>
</div>

CSS：

.container {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;   
}

希望有所帮助！

【讨论】：