如何使文本輸入w /按鈕在響應div內自動調整

Question

我正在使用一個已經響應並且工作正常的網站。我正在嘗試在右側添加一個帶有按鈕的文本輸入字段，並希望文本輸入可以自動調整大小，並且按鈕保持固定大小。

一般HTML/CSS是：

<style> 
    #container { width: 100%; } 
    #text { float: left; } 
    #btn { float: left; overflow: hidden; } 
</style> 

<div id="container"> 
    <div id="text"><input type="text" /></div> 
    <div id="btn"><input type="submit" /></div> 
</div> 

視覺：

+---------------- container (autosize) --------------+ 
| +------------------------------------------------+ | 
| |  text (autosize)  |  btn  | | 
| +------------------------------------------------+ | 
+----------------------------------------------------+ 

期望的行爲：

容器格將根據顯示寬度AUTOSIZE - 這已經得到處理。 btn div的大小與按鈕的寬度完全相同 - 這也已經完成。

我想文本輸入div自動調整文本輸入爲100％的文本div。

這可能嗎？我想我已經提供了足夠的信息，但很樂意提供任何其他需要的細節。我一直在努力工作數小時，在這一點上感到沮喪。

編輯

我可能沒有解釋所期望的行爲不夠清楚。

#container寬度根據顯示寬度而變化。這已經完美地發生了。它可以是960px的寬度，一直到320px的寬度。

#btn不是固定寬度。它將一直定位到#container的右邊距。

#text寬度需要自動調整以佔據#container的左側和#btn的右側頁邊之間的整個寬度。

Answer 1

我會用老同學的表這一點。以下應爲您提供一個起點：

一）添加包裝的div作爲錶行：

<div id="container"> 
    <div id="temp"> 
     <div id="text"><input type="text" /></div> 
     <div id="btn"><input type="submit" /></div> 
    </div> 
</div> 

b）設置的div顯示爲table，table-row和table-cell

#container { 
    display: table; 
    width: 100%; 
} 
#temp { 
    display: table-row; 
} 
#text, #btn { 
    display: table-cell; 
} 

c）將第一個單元格的寬度設置爲100%;這使得細胞儘可能地寬，同時保持其它細胞儘可能地窄：

#text { 
    width: 100%; 
} 

d）將輸入框100%以及：

#text input { 
    width: 100%; 
} 

e）改進。

Demo with ids replaced with classes

Answer 2

試試這個

CSS

<style> 
    #container { width: 100%; } 
    #text { float: left; width:70%;} 
    #btn { float: left; overflow: hidden; width:30%; } 
    .res 
    { 
     width:100%; 

    } 
</style> 

HTML代碼

<div id="container"> 

    <div id="text"><input type="text" class="res"/></div> 
    <div id="btn"><input type="submit" class="res" /></div> 

</div> 

Answer 3

用於本

HTML

<div id="container"> 
    <div id="btn"><input type="submit" /></div> 
    <div id="text"><input type="text" /></div> 

</div> 

的CSS

#container { } 
    #btn { float: right; } 
#text{ 

    background:green; 
    margin-right:100px; 
} 

Demo