输入文本自动宽度填充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>?

(为了显示目的,它非常简化)

• "范围"中的标题是一个长度可变的文本

我想要的是让输入文本元素填充所有可用空间(即黄色空间),同时保持搜索按钮在右侧.

CSS的完整示例是一个小提琴

哪个是完成IE7 +,FF,Safari等解决方案的最简单方法？

谢谢!

Answer 1

像这样？

演示: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
}

​