Geek Answers Handbook

CSS format for checkboxes

I have a list of checkboxes, each of which has 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 CSS, they appear on the same line (I assume they have a built-in or built-in display by default). The problem is that I cannot change the structure of the HTML, and I need every checkbox label in a new line. Like it . Can I use only CSS?

+5
source share
2 answers

The good thing about tags labelis that you can wrap the elements input:

<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 as you want.

Demo here

HTML, CSS :

input, label {
    float: left;   
}

input {
    clear: both;    
}

+7

float: left clear: css. : http://jsfiddle.net/VW529/2/

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

, , : / : . ( jsfiddle div)

+4

More articles:


All Articles