如何在不用按下元素的情況下製作搜索欄，使用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

Esiest方法，使其粘是包含具有以像素爲單位設定的寬度的形式，

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

DEMO

http://jsfiddle.net/XU8MQ/