如何使文本输入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      | |
| +------------------------------------------------+ |
+----------------------------------------------------+

期望的行为:

容器div将根据显示宽度自动调整大小 - 这已经得到处理.btn div的大小与按钮的宽度完全相同 - 这也已经完成了.

我想文本输入div自动调整文本输入是文本div的100%.

这可能吗？我想我已经提供了足够的信息,但我很乐意提供所需的任何其他细节.我已经在这方面工作了好几个小时,此时我很沮丧.

编辑

我可能没有足够清楚地解释所期望的行为.

#container宽度根据显示宽度而变化.这已经完美地发生了.它可以是960px宽度,一直到320px宽度.

#btn不是固定的宽度.它将一直定位到右边缘#container.

#textwidth需要自动调整大小以占据#container左边#btn距和右边距之间的整个宽度.

Answer 1

我会用旧学校的桌子来做这个。以下内容应该为您提供一个起点：

a) 添加一个充当表行的包装 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) 改进。

id 替换为类的演示