Html 输入文本自动宽度填充100%，其他元素浮动

我的搜索框布局如下：

<div id="emulating_variable_width">
  <form id="srxForm" method="post">
     <div id="qsrxSearchbar">            
         <div id="scope"> Person Name </div>
         <input type="text" id="theq" title="Search">
         <button id="btnSearch" type="button">Search</button>
      </div>
  </form>    
</div>​

人名
搜寻
​

（为了便于展示，非常简化）

• “范围”中的标题是长度可变的文本

我希望输入文本元素填充所有可用空间（即黄色空间），同时将搜索按钮保持在右侧

在IE7+、FF、Safari等环境中，哪种方法最容易实现解决方案

---

谢谢

嘿，您可以像这样在输入字段中使用焦点属性

Css

    #emulating_variable_width{
    width:500px;

    height:100px;
    background-color:yellow;
}
input {
    width:auto;
    /*width:100%;*/
    float:left;
    width:100px;
    font-size: 17px;
}
#scope{float:left;}
button{float:left;}

input:focus{
width:200px;
}

HTML

    <div id="emulating_variable_width">
   <form id="srxForm" method="post">
         <div id="qsrxSearchbar">            
             <div id="scope"> Person Name </div>
             <input type="text" id="theq" title="Search">
             <button id="btnSearch" type="button">Search</button>
          </div>
    </form>    
</div>

人名
搜寻

---

现场演示

您需要这样的东西：

#emulating_variable_width{
    width:500px;

    height:100px;
    background-color:yellow;
}

input {
    width:320px;
    /*width:100%;*/
    float:left;
    font-size: 17px;
}
#scope{float:left;}
button{float:left;}

像这样

演示：

HTML:

---

​

JQuery不是一个选项吗？我不希望在这里使用JQuery，尽管如果没有其他选项。。。是的，这不是我真正需要的，我想让输入字段填充所有可用的剩余黄色宽度，即使它没有焦点！看起来像在工作！但我不确定最后一种款式的目的是什么，本例中的boz尺寸，是否有必要？坦克不是真的必要，它更多的是一个“以防万一”的使用，它将没有工作。确保在所有浏览器中都能并排使用：）。@jmserra:box size:border box的要点是确保

输入

与包含的

span

完全匹配。例如，如果在

输入

上有大量的

填充

或

边框

：vs.Yeah lol，24小时40，试试看，你会得到Vox Populi徽章：）这段代码很有效，但“span{display:block}”显示了对HTML和CSS的巨大误解。重点是做一些灵活的事情，固定宽度不起作用，因为空间不总是500px，标签可以动态更改

<div id="emulating_variable_width">
   <form id="srxForm" method="post">
       <div id="qsrxSearchbar"> 
           <button id="btnSearch">Search</button>             
           <label id="scope"> Person Name </label>
           <span><input type="text" id="theq" title="Search" /></span>
      </div>
   </form> 
</div>​

#qsrxSearchbar
{
    width: 500px;
    height: 100px;
    overflow: hidden;
    background-color: yellow;
}

#qsrxSearchbar input
{
    width: 100%
}

#qsrxSearchbar label
{
    float: left
}

#qsrxSearchbar span 
{
    display: block;
    overflow: hidden;
    padding: 0 5px
}

#qsrxSearchbar button 
{
    float: right
}

#qsrxSearchbar input, .formLine button
{ 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}