Как поставить флажки рядом?

Question

Я использую пары ввода метки со следующим стилем для меток, но когда я использую два элемента управления CheckBox в одной строке, метки флажков (свойства элемента управления, а не отдельные элементы управления Label) отображаются вместе, Слева от двух флажков.

    label
    {
        float: left;
        width: 150px;
        padding-right: 10px;
        text-align: right;
    }

Answer 1

Метки появляются вместе из-за правила float: left. Вы можете определить другое правило css для меток флажков, которые не выровнены по левому краю ввода.

Answer 2

Если идея состоит в том, чтобы задать ширину надписей, вы можете установить для них «display: inline-block», но это может не полностью работать с некоторыми старыми браузерами.

http://www.quirksmode.org/css/display.html

Answer 3

Просто удалите правило css "float: left". Метки и входные данные отображаются как встроенные элементы, поэтому они будут находиться на одной строке «по умолчанию».

Answer 4

Как сказал Киршштейн, вы можете заключить пары ввода / метки в элемент div и затем поместить их в div.

Или вы можете применить плавающие значения для входов и меток. Последнее предложение предполагает, что ваш код выглядит примерно так:

<label for="input1">Input 1</label>
<input type="checkbox id="input1" name="input1" />
<label for="input2">Input 1</label>
<input type="checkbox id="input2" name="input2" />

Answer 5

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