CSS формат для флажков

Question

У меня есть список флажков, каждый из которых имеет метку:

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

Без использования CSS они отображаются в одной строке (я полагаю, у них есть значение по умолчанию "встроенный или блочный дисплей).Проблема в том, что я не могу изменить структуру HTML, и мне нужно, чтобы каждая пара флажка-метки появлялась в новой строке. Вот так .Возможно ли использовать только CSS?

Answer 1

Хорошая вещь о label тегах заключается в том, что вы можете обернуть элементы 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>

И если вы добавите следующий CSS:

label {
    display: block;   
}

Будет отображеноэто как вы хотите.

Демо здесь

Поскольку вы НЕ МОЖЕТЕ редактировать свой HTML, этот CSS будет работать:

input, label {
    float: left;   
}

input {
    clear: both;    
}

Демо здесь

Answer 2

Используя float: left и clear: left, вы можете сделать это только css. Демо: http://jsfiddle.net/VW529/2/

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

Единственная проблема заключается в том, что в примере не показано больше информации о родительских элементах, что дает возможность переполнению элемента контейнера: скрытый и / или сброс: оба могут потребоваться для предотвращения плавающих элементов рядом с последней меткой. (отредактированный код jsfiddle с контейнером div)