輸入元素彼此相鄰，覆蓋整個容器寬度

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

希望這有助於！