如何在响应式 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 的右边距。

#text 的宽度需要自动调整以占据#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) 改进。

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