Держите переключатели с их метками на переносах строк

Question

У меня есть HTML-форма с разделами, расположенными так:

Я хочу, чтобы надписи были встроенными, чтобы этот раздел не занимал 7 разрывов строки, но я хотел бы знать, как можно убедиться, что переключатели остаются с их надписями.

Примечание: метки имеют разную длину и динамически заполняются данными с сервера, поэтому я не могу установить div с фиксированной шириной, не вызывая некоторых странных проблем с пробелами.

Если есть идиоматический способ сделать это, пожалуйста, покажите мне.

Answer 1

Поместите каждую пару вход / метка в диапазон, затем установите white-space: nowrap на диапазон. Как то так:

<div class="radios">
    <span>
        <input type="radio" id="productTypeRC" />
        <label for="productTypeRC">RC</label>
    </span>
    ...
</div>

CSS:

.radios > span
{
    white-space: nowrap;
}

Редактировать: Приведенная выше техника страдает от ошибки в Chrome, когда пары не переносятся и вместо этого скрыты. Эта ошибка демонстрируется в вопросе Текст неправильно переносится между элементами, имеющими white-space: nowrap. Решения включают в себя использование float: left с добавлением некоторого запаса, чтобы компенсировать сжатый интервал или использование HTML-кода, пока он не заработает. Если вы просто поместите <input> и <label> в ту же строку, что и <span>, это сработает.

<div class="radios">
    <span><input type="radio" id="productTypeRC" /> <label for="productTypeRC">RC</label></span>
    <span><input type="radio" id="productTypeTC" /> <label for="productTypeTC">TC</label></span>
    <span><input type="radio" id="productTypeNS" /> <label for="productTypeNS">NS</label></span>
    ...
</div>

jsfiddle.net / Z5uaT / 57

Answer 2

Поставьте флажок внутри метки (да, это верно) и сделайте метку inline-block (см. this JSfiddle для демонстрации). IMO, это более элегантное и семантическое решение, чем span упаковка , предложенная gilly3 , поэтому я решил опубликовать, даже если вы уже приняли ответ. 1009 *