định dạng CSS cho hộp kiểm

Question

Tôi có một danh sách các hộp kiểm, mỗi một với một nhãn:

<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 họ được thể hiện trong cùng một dòng (Tôi cho rằng họ có một mặc định "inline" hay "khối inline " trưng bày). Vấn đề là tôi không thể sửa đổi cấu trúc HTML và tôi cần mỗi nhãn hộp kiểm xuất hiện trong một dòng mới. Like this. Có thể sử dụng CSS không?

Answer 1

Những điều tốt về label thẻ là bạn có thể quấn input yếu tố:

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

Và nếu bạn thêm CSS sau đây:

label { 
    display: block; 
} 

Nó sẽ hiển thị nó như thế nào bạn muốn.

Demo here

Như bạn KHÔNG THỂ chỉnh sửa HTML của bạn, CSS này sẽ làm việc:

input, label { 
    float: left; 
} 

input { 
    clear: both;  
} 

Demo here

Answer 2

Sử dụng phao: trái và phải: bên trái bạn có thể thực hiện việc này chỉ với css. Demo: http://jsfiddle.net/VW529/2/

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

Vấn đề duy nhất là ví dụ không hiển thị thêm thông tin về các yếu tố cha mẹ, đưa ra tràn yếu tố container: ẩn và/hoặc clear: both thể là cần thiết để ngăn chặn các yếu tố nổi bên cạnh nhãn cuối cùng. (Thay đổi nội dung đang jsfiddle với div container)