formato CSS para casillas de verificación

Question

tengo una lista de casillas de verificación, cada uno con una etiqueta:

<input type="checkbox" id="patient-birth_city" name="patient-birth_city" /> 
    <label for="patient-birth_city">(_PATIENT_BIRTH_CITY_)</label> 
    <input type="checkbox" id="patient-birth_state" name="patient-birth_state" /> 
    <label for="patient-birth_state">(_PATIENT_BIRTH_STATE_)</label> 
    <input type="checkbox" id="patient-birth_country" name="patient-birth_country" /> 
    <label for="patient-birth_country">(_PATIENT_BIRTH_COUNTRY_)</label> 

Without using any CSS que se mostraron en la misma línea (supongo que tienen una "línea" o "bloqueo-inline por defecto " monitor). El problema es que no puedo modificar la estructura HTML y necesito que cada par de casilla de verificación aparezca en una nueva línea. Like this. ¿Es posible usar solo CSS?

Answer 1

Lo bueno de label etiquetas es que se puede envolver las input elementos:

<label> 
    <input type="checkbox" id="birth_city" name="birth_city" /> 
    City 
</label> 
<label> 
    <input type="checkbox" id="birth_state" name="birth_state" /> 
    State 
</label> 
<label> 
    <input type="checkbox" id="birth_country" name="birth_country" /> 
    Country 
</label> 

Y si se añade el siguiente CSS:

label { 
    display: block; 
} 

Será muéstralo como quieras

demostración here

como no se puede editar el código HTML, CSS esto funcionaría:

input, label { 
    float: left; 
} 

input { 
    clear: both;  
} 

demostración here

Answer 2

Usando float: izquierda y clara: izquierda puede hacer esto solo con css. Demostración: http://jsfiddle.net/VW529/2/

input {margin:3px;} 
input, label {float:left;} 
input {clear:left;} 

El único problema es que el ejemplo no muestra más información de los elementos primarios, dando al elemento de desbordamiento de contenedores: oculto y/o claro: ambos podrían ser necesarios para evitar que los elementos flotantes junto a la última etiqueta. (Código jsFiddle editado con el contenedor div)