Подтвердить что ты не робот

Радиокнопки и ярлыки для отображения в одной строке

Почему мои метки и переключатели не будут оставаться в одной строке, что я могу сделать?

Вот моя форма:

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

ОТВЕТЫ

Ответ 1

Если вы используете структуру 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;
}

Ответ 2

То, что я всегда делал, это просто включить переключатель в ярлыке...

<label for="one">
<input type="radio" id="one" name="first_item" value="1" />
First Item
</label>

Что-то вроде этого всегда работало для меня.

Ответ 3

у вас может быть ширина, указанная для тэгов ввода где-то в css.

добавьте class="radio" в свои радиокниги и input.radio {width: auto;} к вашему css.

Ответ 4

Хм. По умолчанию <label> display: inline; и <input> (грубо говоря) display: inline-block;, поэтому оба они должны быть в одной строке. См. http://jsfiddle.net/BJU4f/

Возможно, таблица стилей устанавливает label или input на display: block?

Ответ 5

Поместите их в display:inline.

Ответ 6

Я предполагаю, что проблема заключается в том, что они обертываются на отдельные строки, когда окно слишком узкое. Как указывали другие, по умолчанию метка и ввод должны быть "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>

Ответ 7

Я использую этот код и отлично работает:

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 или любую другую библиотеку для этого tho;))

Ответ 8

Я не смог воспроизвести вашу проблему в Google Chrome 4.0, IE8 или Firefox 3.5 с помощью этого кода. Метка и радиокнопка оставались на одной линии.

Попробуйте поместить их внутри тега <p> или установите переключатель, который будет встроен, как предложил The Elite Gentleman.

Ответ 9

Если проблема в том, что ярлык и ввод обертываются на две строки, когда окно слишком узкое, удалите пробелы между ними; например:.

<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />

Если вам нужно пространство между элементами, используйте неразрывные пробелы (&amp; nbsp;) или CSS.

Ответ 11

Примечание. Традиционно использование тега метки предназначено для меню. например:

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

Ответ 12

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

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

Ответ 13

Я всегда избегаю использования 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>