Blocchi in linea e Involucro di testo con CSS

Question

Desidero visualizzare una casella di controllo, seguita da un testo che si avvolge sotto di sé. Il codice HTML senza alcun CSS appare come segue:

<input type="checkbox" checked="checked" /> 
<div>Long text description here</div> 

lo voglio per visualizzare simile a:

X Long Text 
    Description 
    Here 

Si avvolge attualmente in giro così

X Long Text 
Description Here 

Questo è facile da fare con tavoli, ma ho bisogno che sia in CSS per altri motivi. Ho pensato a una combinazione di display: inline-block/float: right/clear/spans invece dei DIV funzionerebbe, ma finora non ho avuto fortuna.

Answer 1

Avvolgere la casella di controllo e l'etichetta in un div contenitore (o Li - faccio le forme con le liste spesso) e applicare

<div class="checkbox"> 
    <input type="checkbox" id="agree" /> 
    <label for="agree">I agree with checkbox</label> 
</div> 




.checkbox input { 
     float:left; 
     display:block; 
     margin:3px 3px 0 0; 
     padding:0; 
     width:13px; 
     height:13px; 
    } 

.checkbox label { 
     float:left; 
     display:block; 
     width:auto; 
    } 

Answer 2

Prova questo:

input { float: left; } 
div { margin-left: 40px; } 

Tune il margin-left a quanto spazio tu vuoi. Lo float: left sulla casella di controllo lo toglie dal layout del blocco in modo che non spinga verso il basso il testo.