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

Question

不是我写过的最自我解释的标题。

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

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

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

希望有所帮助！