Css 如何使带有按钮的文本输入在响应div中自动调整大小

我正在与一个网站，已经是响应和工作良好。我试图添加一个文本输入字段，右边有一个按钮，希望文本输入自动调整大小，按钮保持固定大小

通用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>

期望的行为：

容器div将根据显示宽度自动调整大小-这已得到处理。btn div的大小将精确到按钮的宽度-这已经完成了

我希望文本输入div自动调整大小，文本输入为文本div的100%

这可能吗？我想我已经提供了足够的信息，但我很乐意提供任何其他需要的细节。我已经为此工作了几个小时，现在我很沮丧

编辑

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

#容器

宽度根据显示宽度变化。这已经完美地发生了。它可以是960像素宽，一直到320像素宽

#btn

不是固定宽度。它将一直定位到

#容器的右边缘

#文本
宽度需要自动调整大小，以占据
#容器
左侧和
#btn
右侧边距之间的整个宽度。
试试这个

css

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

  }
</style>

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

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


#容器{宽度：100%；}
#文本{浮动：左；宽度：70%；}
#btn{浮点：左；溢出：隐藏；宽度：30%；}
.res
{
宽度：100%；
}

html代码

<div id="container">

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

</div>


用于此

HTML

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

</div>

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

a） 添加充当表行的包装器div：

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

c） 将第一个单元格的宽度设置为
100%
；这使单元尽可能宽，同时使其他单元尽可能窄：

#text {
    width: 100%;
}

d） 将输入框设置为
100%
：

#text input {
    width: 100%;
}

e） 改善

按钮的宽度是固定的还是未知的？试试这个萨尔曼：按钮宽度未知。罗希特·阿扎德：文本字段需要自动调整为文本div的100%。我试着添加
#text{width:100%；}
，但没有这样做。文本输入不会自动调整大小来填充#文本diving your fiddle，文本输入下降到按钮下方，形成两个水平行，而不是全部在一个水平行上。此外，
#text{margin right:100px；}
假定按钮的固定宽度为100px。按钮没有固定的宽度。我需要按钮浮动，其右边距一直到#容器的右边，其左边距一直到#文本的右边。哈哈，希望我说的对！在移动设备（较小的显示器）上，按钮将不会正确显示。我想我无法指定按钮的宽度。#容器的宽度达到960px。在这种情况下，#text和#btn之间有560px的间隙。我真的不认为我可以设置按钮的宽度，文本需要自动调整为#容器宽度减去#btn宽度之间的差值。文本和btn之间应该没有间隙。你不希望文本和btn之间有间隙？对。按钮向右浮动。只有#文本宽度应该改变。Boopathi，我真的很感谢你的勤奋。当然谢谢你。只是按钮的宽度不能改变，否则它将与站点的其他按钮不匹配。如果页面显示的宽度为960px，并且#btn设置为30%，则按钮的宽度将接近300px，这看起来很可怕。同样，如果显示宽度降至320px且#btn为30%，则显示宽度不够宽。我试着弄乱了btn的宽度，但它需要单独使用，否则看起来就不太好。
#text {
    width: 100%;
}

#text input {
    width: 100%;
}