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

Question

不是我曾经创作过的最具自我解释性的标题。

我试图做（see this fiddle）是文本字段和按钮，保持定位权旁边的海誓山盟（无边距），与按钮的右侧，并thetext场占地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; 
} 

希望这有助于！