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 / overflow：hidden / etc。 可以找到的技巧，但我一直無法獲得想要的效果。

Answer 1

參見： http : //jsfiddle.net/thirtydot/nSDV9/8/

HTML：

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

CSS：

#container{
    width: 500px;   
    background: #ccc;
    overflow: hidden;
    position: relative;
}

.filter{
    float: left;
    margin-top: 4px;
    margin-right: 4px;
    background-color: green;
    color: white;
    font-weight: bold;
}

.search-container {
    overflow: hidden;
    padding: 4px;
}
#searchbox {
    width: 100%;
    margin: 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 2

您可以這樣：

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

}

Answer 3

這是我能做的最干凈的：

http://jsfiddle.net/nSDV9/11/