Filling space between floating elements

问题

I have container div (gray box) with floating elements inside:

Bars are floating to the left and button if floating to the right. Now I want textbox to fill the empty space between the bars and the button.

Please note that bars count may vary during typind so textbox should be able to resize accordingly. So solutions with static widths (even if they are expressed in %) will not work.

How can I do it?

EDIT:

Here's my code:

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;
}

回答1:

May be that's you want check this http://jsfiddle.net/bYmM4/7/ . Write like this:

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}

来源：https://stackoverflow.com/questions/12257517/filling-space-between-floating-elements

标签

html

css

css-float