Sposta casella di controllo HTML sul lato sinistro della sua larghezza

Question

Non riesco a utilizzare alcun JavaScript e vorrebbe una risposta in solo CSS se possibile. Ho la scatola seguente controllo in una forma:

<label for="autologin">Remember Me</label> 
<input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> 
<div class="clear"></div> 

con il seguente CSS:

label { 
    float: left; 
    margin: 5px 0px; 
} 

input { 
    float: right; 
    margin: 5px 0px; 
    width: 200px; 
} 

.clear { 
    clear: both; 
} 

Cosa CSS posso aggiungere alla casella di controllo per farlo apparire sul lato sinistro della sua 200 px di larghezza? Sto attraversando un periodo difficile con i float (in particolare l'allineamento verticale) ma ho sentito che è la pratica corretta.

MODIFICA: OK, molte persone suggeriscono di non spostare gli ingressi a destra. Se è così, potrei anche non usare il float e solo impostare la larghezza dell'etichetta e avere un
dopo ogni riga. Sarebbe una pratica accettabile o sto semplicemente perdendo l'uso dei galleggianti qui?

Answer 1

provare questo, ecco la demo link

label { 
    float:left; 
    margin: 5px 0px; 
} 

input { 
    // float right; 
    margin: 5px 0px; 
    width: 200px; 

} 

.clear { 
    clear: both; 
} 

Answer 2

Una tabella va bene per questo, poiché si dispone di dati tabellari (forniti dall'utente). Questo risolverà anche i tuoi problemi di allineamento verticale.

Purtroppo non è possibile inserire la casella di controllo sul lato sinistro della larghezza. Personalmente, consiglierei di evitare lo styling input senza specificare [type=something]. Tuttavia, se si utilizza un sacco di tipi di ingresso HTML5 come email, number, url etc allora si potrebbero trovare utile per stile tutto input in un modo, quindi utilizzare width:auto per [type=radio] e [type=checkbox]

Answer 3

Impostare la larghezza di come 20px, questo risolve il problema Non ha bisogno di essere 200 px lo fa?

Answer 4

Non spostarlo a sinistra della larghezza, lasciare che dettare la propria larghezza e quindi aggiungere il riempimento sul lato destro se necessario. Ma a giudicare dal tuo design, non lo fai.

input[type=checkbox] { width: auto }

Answer 5

Se usi attributo galleggiante significa, è necessario fornire una larghezza al contenitore forma.

Answer 6

È necessario rimuovere float: right; e width: 200px; nella dichiarazione della classe input. E vorrei impostare le larghezze per tutte le etichette (ad esempio 200px) per allineare la seconda colonna.

label { 
    float: left; 
    margin: 5px 0px; 
    width: 200px; 
} 

input { 
    /*float: left;*/ /* This will also work. */ 
    margin: 5px 0px; 
} 

.clear { 
    clear: both; 
} 

Vedi jsFiddle Example.

Answer 7

Penso che il problema che causa la tua casella di controllo sia centrato in quel modo perché hai impostato l'input width:200px quindi tutto quello che devi fare è aggiungere il tuo width:auto alla tua casella di controllo con il suo id (autologin). Inoltre è necessario creare un contenitore div per la casella di controllo.Ecco il codice HTML:

<label for="autologin">Remember Me</label> 
<div id='check'><input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"></div> 
<div class="clear"></div> 

e qui è il CSS:

label { 
    float: left; 
    margin: 5px 0px; 
} 

input { 
    float: right; 
    margin: 5px 0px; 
    width: 200px; 
    border:solid 1px; 
} 
#autologin 
{ 
width:auto; 
float:left; 
} 
#check 
{ 
float:right; 
width:200px; 
border:solid 1px; 
} 

.clear { 
    clear: both; 
} 

Spero che questo aiuto :)

Answer 8

Puoi allineare o cambiare la direzione di una casella di controllo, perché non ha alcun allegato, è solo una scatola.

Al fine di ottenere questo fatto in poche parole in un div e dare il div questo stile:

.checkDIV 
{ 
    text-align:left; 
} 

esempio:

<div align="center" class="checkDIV"> 
    <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> 
</div>