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

Question

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

我正在尝试做的 ( see this fiddle ) 是让文本字段和按钮保持正确彼此相邻的位置(无边距)，同时按钮向右，文本字段覆盖按钮未占用的容器剩余宽度的 100%。即使调整包含元素的大小，两者之间的关系也应该保持。

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

Answer 1

查看这个小演示:little link .代码很容易 self 解释，但这里是基本思想:

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

希望对您有所帮助!