Радиокнопки и метка для отображения в одной строке
Почему мои ярлыки и переключатели не будут оставаться в одной строке, что мне делать?
Вот моя форма:
<form name="submit" id="submit" action="#" method="post">
<?php echo form_hidden('what', 'item-'.$identifier);?>
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
<label for="two">Second Item</label>
<input type="radio" id="two" name="first_item" value="2" /> <input class="submit_form" name="submit" type="submit" value="Choose" tabindex="4" />
</form>
13 ответов
Если вы используете структуру HTML, которую я выложил в этом вопросе, вы можете просто переместить свою метку и ввести ее влево и корректировать отступы / поля, пока все не выровняется.
И да, вы захотите, чтобы ваша радио-кнопка имела имя класса для старого IE. И чтобы все они были в одной строке, в соответствии с разметкой, с которой я связан выше, это было бы так:
<fieldset>
<div class="some-class">
<input type="radio" class="radio" name="x" value="y" id="y" />
<label for="y">Thing 1</label>
<input type="radio" class="radio" name="x" value="z" id="z" />
<label for="z">Thing 2</label>
</div>
</fieldset>
означает, что ваш стартовый CSS будет выглядеть примерно так:
fieldset {
overflow: hidden
}
.some-class {
float: left;
clear: none;
}
label {
float: left;
clear: none;
display: block;
padding: 2px 1em 0 0;
}
input[type=radio],
input.radio {
float: left;
clear: none;
margin: 2px 0 0 2px;
}
То, что я всегда делал, это просто заключал переключатель в ярлык...
<label for="one">
<input type="radio" id="one" name="first_item" value="1" />
First Item
</label>
Нечто подобное всегда работало на меня.
У вас может быть ширина, указанная для ваших входных тегов где-то в вашем CSS
добавить class="radio" на ваши радио коробки и input.radio {width: auto;} к вашему css.
Я всегда избегаю использования float:left но вместо этого я использую display: inline
.wrapper-class input[type="radio"] {
width: 15px;
}
.wrapper-class label {
display: inline;
margin-left: 5px;
}<div class="wrapper-class">
<input type="radio" id="radio1">
<label for="radio1">Test Radio</label>
</div>Хм. По умолчанию, <label> является display: inline; а также <input> есть (примерно, по крайней мере) display: inline-block;поэтому они оба должны быть на одной линии. Смотрите http://jsfiddle.net/BJU4f/
Возможно, таблица стилей label или же input в display: block?
Я предполагаю, что проблема в том, что они переносятся на отдельные строки, когда окно слишком узкое. Как отмечали другие, по умолчанию метка и ввод должны быть "display:inline;", поэтому, если у вас нет других правил стиля, которые меняют это, они должны отображаться на одной строке, если есть место.
Без изменения разметки невозможно будет это исправить, используя только CSS.
Самый простой способ исправить это - заключить переключатель и метку в элемент блока, такой как p или div, а затем предотвратить это от использования white-space:nowrap, Например:
<div style="white-space:nowrap;">
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
</div>
** Используется таблица для выравнивания радио и текста в одну строку
<div >
<table>
<tbody>
<tr>
<td><strong>Do you want to add new server ?</strong></td>
<td><input type="radio" name="addServer" id="serverYes" value="1"></td>
<td>Yes</td>
<td><input type="radio" name="addServer" id="serverNo" value="1"></td>
<td>No</td>
</tr>
</tbody>
</table>
</div>**
Я использую этот код и работает просто отлично:
input[type="checkbox"],
input[type="radio"],
input.radio,
input.checkbox {
vertical-align:text-top;
width:13px;
height:13px;
padding:0;
margin:0;
position:relative;
overflow:hidden;
top:2px;
}
Вы можете скорректировать верхнее значение (зависит от вашего line-height). Если вы не хотите совместимости с IE6, вам просто нужно поместить этот код на свою страницу. В противном случае вы должны будете добавить дополнительный класс к вашим входам (вы можете использовать jQuery - или любую другую библиотеку - для этого;))
Я не смог воспроизвести вашу проблему в Google Chrome 4.0, IE8 или Firefox 3.5 с использованием этого кода. Метка и радио-кнопка остались на одной линии.
Попробуйте положить их обоих внутри <p> пометить или установить переключатель, чтобы он был встроенным, как предложил The Elite Gentleman.
fieldset {
overflow: hidden
}
.class {
float: left;
clear: none;
}
label {
float: left;
clear: both;
display:initial;
}
input[type=radio],input.radio {
float: left;
clear: both;
}
Примечание. Традиционно использование тега label предназначено для меню. например:
<menu>
<label>Option 1</label>
<input type="radio" id="opt1">
<label>Option 2</label>
<input type="radio" id="opt2">
<label>Option 3</label>
<input type="radio" id="opt3">
</menu>
У меня была похожая проблема - держать все переключатели на одной строке. Попробовав все, что мог, у меня ничего не получилось, кроме следующего. Я имею в виду, что просто использование таблицы решило проблему, позволяющую переключателям отображаться в одной строке.
<table>
<tr>
<td>
<label>
@Html.RadioButton("p_sortForPatch", "byName", new { @checked = "checked", @class = "radio" }) By Name
</label>
</td>
<td>
<label>
@Html.RadioButton("p_sortForPatch", "byDate", new { @class = "radio" }) By Date
</label>
</td>
</tr>
</table>
Мой ответ из другого поста на ту же тему должен помочь вам найти форму для мультичекбокса.
Если проблема заключается в том, что метка и ввод переносятся в две строки, когда окно слишком узкое, удалите пропуски между ними; например:
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
Если вам нужно пространство между элементами, используйте неразрывные пробелы (&nbsp;) или CSS.