html - 如何使用 2 个输入在不按下元素的情况下使搜索栏可裁剪

Question

我有一个问题，我正在尝试创建一个像 youtube 那样的搜索栏。所以我创建了一个 div 并在其中放置了 2 个输入，一个文本和一个按钮。

这是我的代码:

<div id="searchBox">
    <form id="searchBar" name="searchBar" action="#" method="get">
        <input class="searchBar"type="text" name="" placeholder="Search for..." required><input class="searchButton" type="submit" value="Search">
    </form>
</div>

这是我正在使用的 CSS(没有一些颜色和边框):

#searchBox{
overflow: hidden;
}
#searchBox input.searchBar{
min-width: 24em;
float: left;
overflow: hidden;
}
#searchBox input.searchButton{
float: left;
overflow: hidden;
}

这是当窗口宽度足够长时搜索栏的样子: http://gyazo.com/a7eb0f5b0d3a408c93a7e079a8befbec

当我将窗口缩小到比搜索栏小时，按钮会下降到文本字段下方，如下所示: http://gyazo.com/f8c48632945acfc56f8d6036f2421df3

我正在尝试创建一个搜索栏，其响应类似于 youtube 正在使用的搜索栏，女巫意味着当窗口变小时他们只是剪裁它。

如果有人对此有解决方案，将不胜感激，谢谢!

Answer 1

使它具有粘性的最简单方法是包含以像素为单位设置宽度的表单，

<div id="contain">
<div id="searchBox">
    <form id="searchBar" name="searchBar" action="#" method="get">
 <input class="searchBar"type="text" name="" placeholder="Search for..." required><input class="searchButton" type="submit" value="Search">
    </form>
</div>
 </div>

CSS

#contain {
width: 400px;
}

演示

http://jsfiddle.net/XU8MQ/