输入文本自动宽度填充100％的浮动其它元素

Question

我有以下布局用于与搜索框：

<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>​ 

（其非常简化用于示出的目的）

• 的在标题'范围'是一个长度可变的文本

我想要的是让输入文本元素填充所有可用空间（即黄色空间），同时保留右侧的搜索按钮。

Full example with the CSS is in a fiddle

这将是完成一个解决方案在IE7 +，FF，Safari浏览器等工作的最简单的方法...？

谢谢！

Answer 1

喜欢这个？

DEMO：http://jsfiddle.net/v7YTT/19/

HTML：

<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>​ 

CSS：

#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 
} 

Answer 2

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

的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> 

现场演示http://jsfiddle.net/rohitazad/v7YTT/1/

Answer 3

您需要这样的产品：

#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;}