Bloques en línea y envoltura de texto con CSS

Question

Quiero mostrar una casilla de verificación, seguida de un texto que se envuelve debajo de sí mismo. El HTML sin ningún CSS se ve de la siguiente manera:

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

quiero que se muestre similar a:

X Long Text 
    Description 
    Here 

En la actualidad se envuelve alrededor de esta manera

X Long Text 
Description Here 

Esto es fácil de hacer con tablas, pero necesito que esté en CSS por otras razones. Pensé que una combinación de display: inline-block/float: right/clear/spans en lugar de DIV funcionaría, pero hasta ahora no he tenido suerte.

Answer 1

Wrap la casilla de verificación y la etiqueta en un contenedor div (o li - lo hago formas con las listas de frecuencia) y aplico

<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

Prueba esto:

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

Sintonice el margin-left a la cantidad de espacio usted quiere. El float: left en la casilla de verificación básicamente lo saca del diseño del bloque para que no empuje hacia abajo el texto.