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/

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

1 个答案: