填充浮动元素之间的空间

Question

我的容器div（灰色框）里面有浮动元素：

条形图浮动到左侧，按钮浮动到右侧。现在我希望文本框填充条形图和按钮之间的空白区域。

请注意，在typind期间，条形数可能会有所不同，因此文本框应该能够相应地调整大小。因此，静态宽度的解决方案（即使它们以％表示）将无效。

我该怎么做？

修改

这是我的代码：

HTML：

<div id="dp-container">
    <ol id="tag-list">
        <li dp-item class="dp-bar-table">sales</li>
        <li dp-item class="dp-bar-field">cost</li>
    </ol>

    <input id="dp-input-str" type="text">
    <input type="button" value="GO" style="float: right;">
    <div style="clear:both;"></div>
</div>​

CSS：

body {
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

ol {
    display: inline;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    list-style-type: none;
}

li[dp-item] {
    background-color: #e0ffff;
    display: inline-block;
    float: left;
    padding: 3px;
    margin: 2px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#EBEBEB));
    border: 1px solid lightgray;
    border-radius: 3px;
}

.dp-bar-table {
    color: blue;
    font-weight: bold;
}

.dp-bar-field {
    color: blue;
}

#dp-input-str {
    border: none;
    display: inline-block;
    margin-left: 5px;
    margin-top: 3px;
    width: auto;
    outline: none;
    font-size: 12pt;
    vertical-align: middle;
    line-height: 25px;
    box-shadow: none;

#dp-container {
    display: inline-block;
    border: 1px solid #d3d3d3;
    height: 32px;
    padding: 3px;
    width: 90%;
}

#dp-find-str {
    color: gray;
    float: left;
    margin-top: 10px;
    margin-right: 8px;
}

Answer 1

可能是你要检查这个http://jsfiddle.net/bYmM4/7/。写得像这样：

<强> HTML

<div class="main">
 <input type="button" value="test" />
 <input type="button" value="test" />
    <input type="button" value="Go" class="go"/>
    <div class="textbox">
     <input type="text" />
    </div>
</div>

<强> CSS

.main{position:relative; border:#333 1px solid}
input[type="button"]{width:8%; float:left;}
.textbox{
    background-color:grey;
    overflow:hidden;
    position:relative;
}
.textbox input{
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
input.go{float:right}