CSS fixed固定 float 布局

Question

我正在尝试构建一个搜索框，标签过滤器隐藏在框的左侧，我的标记看起来像这样:

  <div id="searchbox">
    <div class="filter"> filter 1 </div>
    <div class="filter"> filter 2 </div>
    <input id="input" value="search query">
  </div>

我将我的一个尝试放在了 jsfiddle 中:

http://jsfiddle.net/nSDV9/7/

我希望输入元素使用搜索框中的所有剩余空间，而不管隐藏在其左侧的过滤器元素的数量(包括零)。我尝试应用 float /溢出:隐藏/等。我可以找到技巧，但我无法获得我想要的效果。

Answer 1

你可以这样做:

http://jsfiddle.net/nSDV9/9/

HTML:

<div id="container">
    <div class="filter"> filter 1 </div>
    <div class="filter"> filter 2 </div>
<div class="searchwrap">
    <input id="searchbox" value="search query">
    </div>   
</div>

CSS:

#container{
 width: 500px;   
 background: red;
 overflow: hidden;
    position: relative;
}
.searchwrap{
    background:green;
    overflow:hidden;
    position:relative;
    height:20px;
}

.filter{
    float:left;
     background-color: green;
    color: white;
    font-weight: bold;
}

#searchbox {
    position: absolute;
    border: 0;
    background: yellow;
    left: 0;
    width:100%;

}