我有一个搜索框的以下布局：
<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等工作的解决方案？
谢谢！
解决方法
喜欢这个？
演示：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
}
