2012-11-20 15 views
5

Es ist einfacher zu erklären, was ich mit einer Geige brauchen: http://jsfiddle.net/mZrYG/1/Align Etikett mit Knopf

Wie Sie sehen können, wenn das Ausgangsbild vollständig ausgefahren ist, wird das Zeichen in Schaltfläche auf der Linie unter dem Label platziert. Ich versuche, es so zu bekommen, dass die Checkbox links ausgerichtet ist und die Taste rechts auf derselben Linie ausgerichtet ist. Was ist los mit meinem CSS?

Für Wohlstand:

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

Antwort

4

Demo

jetzt Hallo zu display:inline-block in Ihrem Label verwendet

als ähnliche

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

Sie diese float:left; zur Eingabe tun können, Label, Button

oder fügen Klasse fleft

.fleft{ 
    float:left; 
} 

oder wenn Sie wollen nur diese

enter image description here

als versuchen

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

Das am weitesten links stehende Element zuerst geschrieben werden sollte, so habe ich es als 1. Checkbox neu geordnet/Erinnere mich 2. Eingabefelder 3. Anmelden

Sie müssen auch sicherstellen, dass die Die Breiten aller Felder addieren sich zu weniger als span12, also habe ich in jedem der obigen 1/2/3 Elemente Spannungsklassen hinzugefügt.

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

So sind die Kästen über sind jetzt auf der gleichen Linie, aber Sie werden mit dem „line-height rumspielen müssen "Parameter in jeder Ihrer CSS-Klassen (dh Checkbox und die 2 Eingänge), um sicherzustellen, dass sie vollständig gerade ausgerichtet sind.

0

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

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