Format CSS dla wyboru

Question

Mam listę wyboru, każdy z etykietą:

<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 one wykazały w tej samej linii (przypuszczam, że mają domyślne „inline” lub „blok-inline "wyświetlacz). Problem polega na tym, że nie mogę modyfikować struktury HTML i potrzebuję, aby każda para-etykieta-pole wyboru pojawiała się w nowej linii. Like this. Czy to możliwe, używając tylko CSS?

Answer 1

Dobrą rzeczą label tagi to można owinąć input elementy:

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

A jeśli dodać następujący kod CSS:

label { 
    display: block; 
} 

Będzie pokaż, jak chcesz.

Demo here

jak można NIE edytować HTML, CSS to będzie działać:

input, label { 
    float: left; 
} 

input { 
    clear: both;  
} 

Demo here

Answer 2

Użycie float: left and clear: left możesz zrobić to tylko za pomocą css. Demo: http://jsfiddle.net/VW529/2/

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

Jedynym problemem jest to, że przykład nie pokazuje więcej informacji o elementach macierzystych, dając elementu przepełnienia pojemnika: ukryte i/lub jasne: zarówno konieczna, aby zapobiec pływających elementów obok ostatnia etykieta. (Edytowany kod jsfiddle z kontenera div)