etichetta Allineare con il tasto

Question

E 'più facile spiegare quello che mi serve con un violino: http://jsfiddle.net/mZrYG/1/

Come si può vedere, quando lo schermo di uscita è completamente esteso, il pulsante Accedi è posto sulla linea sotto l'etichetta. Sto cercando di farlo in modo che la casella di controllo sia allineata a sinistra e che il pulsante sia allineato a destra sulla stessa riga. Cosa c'è che non va nel mio css?

per la prosperità:

<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

Hi ora utilizzato per display:inline-block nella vostra etichetta

come come questo

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

Answer 2

si può fare questo float:left; all'ingresso, l'etichetta, il pulsante

o aggiungere classe fleft

.fleft{ 
    float:left; 
} 

oppure se desideri solo questo

che cercare

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

Answer 3

Il più a sinistra elemento deve essere scritto prima, così ho riarrangiato come 1. casella/Ricordami 2. caselle di input 3. Entra

È inoltre necessario assicurarsi che il le larghezze di tutte le caselle si aggiungono a meno di span12, quindi ho aggiunto classi di span all'interno di ciascuna delle voci 1/2/3 sopra.

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

Così le caselle sopra sono ora sulla stessa linea, ma si dovrà giocare con il "line-height "parametro in ciascuna delle tue classi css (es. checkbox e 2 input) per assicurarti che siano allineati completamente dritti.

Answer 4

Opzione 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> 

Opzione 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>