用CSS自動伸展搜索字段掙扎

Question

我一直在努力嘗試讓這個搜索字段與瀏覽器（例如amazon.com）一起伸展。

我已經嘗試在谷歌中發現的各種事情，如使輸入域或父容器100％，溢出...等，但我似乎無法得到它：/

我也試過浮動類別的權利，它與提交按鈕交換地點。

任何想法我錯了？

http://jsfiddle.net/SkinnyGeek1010/RzHWA/

Answer 1

這可能是，你可能需要使用一個表，如果你想有完成任務的情況。使用包含一行表格的表格，將內容分成三個單元格，輸入字段位於中間單元格中。將表格寬度和中間單元格寬度設置爲100％，並將輸入字段寬度設置爲98％（嘗試100％，您會看到爲什麼需要略微減少）。哦，並防止細胞內的換行符。

概念的一個粗略的演示：http://jsfiddle.net/yucca42/hyEPu/

如果你的公司警察禁止表格來佈局，試着告訴他們這是一個數據表。如果不這樣做，你可以在CSS中使用display: table等模擬表格（雖然這會變得更加複雜，並且會在舊版IE中失敗）。