填充空間

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}