Question

我试图用贴在盒子左边的标签过滤器建立一个搜索箱。

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

我的尝试之一是:

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

我希望投入部分能够利用搜索箱中的所有剩余空间,而不管被拖到左边的过滤器数量(包括零)。我试图应用浮/流:隐藏/etc。我可以看到,但我没有能够取得我想要的效果。

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

}

Answer 2

http://jsfiddle.net/thirtydot/nSDV9/8/“rel=”nofollow” http://jsfiddle.net/thirtydot/nSDV9/8/。

<>光>:

<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 3

This is the cleanest I could make:

http://jsfiddle.net/nSDV9/11/>rel=“nofollow”> http://jsfiddle.net/nSDV9/11/。

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

友情链接