使多個文本輸入字段看起來結合浮動屬性（css，bootstrap）

Question

我試圖樣式登錄輸入字段像下面 和我得到了期望的結果從檢查活的元素 但我不太瞭解這裏使用float屬性。

使用引導程序，這是HTML的外觀

<div class="wrapper"> 
    <div class="wrap-input"> 
     <input class="input-block-level" type="text" placeholder="username"></input> 
    </div> 
    <div class="wrap-input"> 
     <input class="input-block-level" type="text" placeholder="password"></input> 
    </div> 
</div> 
<button class="btn">test</button> 

這裏我有wrapper與float: left和嵌套wrap-input也有float: left。

有人可以請解釋爲什麼float在這裏是必要的，以實現這一目標嗎？

Here is JSFiddle

Answer 1

包裹輸入是浮動的，因此它會彼此粘在一起。 接下來元素正在顯示塊，以便可以設置寬度; 作者然後設置包裝輸入的寬度爲100％。這意味着包裝的寬度爲 。所以沒有空間讓換行輸入在同一行 所以第二個只是去下一行。

由於它們是浮動的，它們會彼此粘在一起。這是整個概念。

沒有浮動的高度和寬度必須設置明確性和邊距。

Answer 2

我只是消除雙方float的，而你仍然得到基本的外觀和感覺你正在尋找的，至少在Chrome中。有關工作示例，請參閱http://jsfiddle.net/designingsean/zVqE2/5/。

他們似乎正在做的唯一的事情是保持input的運行頁面的寬度。這可以通過在.wrapper類中設置width屬性或僅使用Bootstrap的內置類之一（請參閱文檔）輕鬆解決。