Переключатели и метки для отображения в одной строке

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

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

<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 60
html css

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;
}
84

что я всегда делал-это просто обернуть переключатель внутри метки...

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

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

51

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

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

9

поставить их обоих в display:inline.

5

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

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

5

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

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

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

1

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

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

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

0

мой ответ из другого поста на ту же тему Должен вам помочь zend form for multicheckbox удалить входные данные из меток

0

Примечание: традиционно тег 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>
0

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

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

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

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

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

0