浮動元素之間的填充空間

Question

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

條形圖在左側浮動，按鈕在右側浮動。 現在，我希望文本框填充條形圖和按鈕之間的空白區域。

請注意，在打字過程中，條數可能會有所不同，因此文本框應能夠相應地調整大小。 因此，具有靜態寬度的解決方案（即使它們以％表示）也將不起作用。

我該怎么做？

編輯：

這是我的代碼：

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}