CSS format for checkboxes

Question

I have a list of checkboxes, each one with a label:

    <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 they are showed in the same line (I suppose they have a default "inline" or "block-inline" display). The problem is I can't modify HTML structure and I need each pair checkbox-label appear in a new line. Like this. Is it possible using only CSS?

Answer 1

The good thing about label tags is you can wrap the input elements:

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

And if you add the following CSS:

label {
    display: block;   
}

It will display it how you want.

Demo here

As you CAN'T edit your HTML, this CSS would work:

input, label {
    float: left;   
}

input {
    clear: both;    
}

Demo here

Answer 2

Using float:left and clear:left you can do this with only css. Demo: http://jsfiddle.net/VW529/2/

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

The only problem is that the example does not show more information of parent elements, giving the container element overflow:hidden and/or clear:both might be needed to prevent floating elements next to the last label. (edited jsfiddle code with container div)