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

Question

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

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

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

Answer 1

看看这个小演示：小链接。该代码非常自我解释，但这是基本思想：

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

希望有帮助！