對齊標籤與按鈕

Question

很容易解釋什麼，我需要一個小提琴：http://jsfiddle.net/mZrYG/1/

正如你可以看到，當輸出畫面完全伸展，在按鈕標誌被放置在標籤下的線。我試圖獲取它，以便複選框左對齊，並且按鈕右對齊在同一行上。我的CSS有什麼問題？

繁榮：

<div class="row"> 
    <div class="span3"> 
     <form class="signin" method="POST"> 
     <input type="text" placeholder="Username" name="username" /> 
     <input type="password" placeholder="Password" name="password" /> 
     <label class="checkbox"> 
     <input type="checkbox" name="form[remember]" /> Remember me 
     </label> 
     <button class="btn btn-mini btn-primary pull-right" type="submit">Sign in</button> 
     </form> 
    </div> 
</div>​ 

Answer 1

Demo

嗨現在用於display:inline-block在標籤

因爲這樣

label { 
    display: inline-block; 
    margin-bottom: 5px; 
    vertical-align: top; 
} 

Answer 2

你可以做到這一點float:left;輸入，標籤，按鈕

或添加類fleft

.fleft{ 
    float:left; 
} 

，或者如果你只想要這個

不是試圖

<label style="float:left;" class="checkbox"> 

Answer 3

最左邊的元素應該先寫，所以我重新安排它作爲 1複選框/記住我 2.輸入框 3.登錄

您還必須確保所有盒子的寬度都增加到小於span12，所以我在上面的每個1/2/3項目中添加了span類。

<form class="signin" method="POST"> 
     <label class="checkbox span2"> 
    <input type="checkbox" name="form[remember]" /> Remember me 
    </label> 
    <input type="text" placeholder="Username" name="username" class="span3"/> 
    <input type="password" placeholder="Password" name="password" class="span3"/> 
     <button class="btn btn-mini btn-primary" type="submit">Sign in</button> 
    </form> 

所以盒子上面現在在同一行，但你將不得不玩的「行高「參數在你的每個CSS類（即複選框和2個輸入），以確保它們完全對齊。

Answer 4

選項1：

<label class="checkbox"> 
<input type="checkbox" name="form[remember]" /> Remember me 
<button class="btn btn-mini btn-primary" type="submit">Sign in</button> 
</label> 

選項2：

<label class="checkbox"> 
<input type="checkbox" name="form[remember]" /> Remember me 
<button class="btn btn-mini btn-primary pull-right" type="submit">Sign in</button> 
</label>