Как я могу сделать многострочные, выровненные по вертикали и горизонтали метки для переключателей в HTML-формах с помощью CSS?

Предполагая следующую разметку:

<fieldset>
    <legend>Radio Buttons</legend>
    <ol>
        <li>
            <input type="radio" id="x">
            <label for="x"><!-- Insert multi-line markup here --></label>
        </li>
        <li>
            <input type="radio" id="x">
            <label for="x"><!-- Insert multi-line markup here --></label>
        </li>
    </ol>
</fieldset>

Как оформить метки переключателей так, чтобы они выглядели следующим образом в большинстве браузеров (IE6+, FF, Safari, Chrome):

Ярлыки радиокнопок


html css radio-button label cross-browser
person Patrick Klingemann    schedule 26.05.2009    source источник

Ответы (5)


arrow_upward
12
arrow_downward

Я считаю, что это делает все это. Однако вы не упомянули, что он должен проверяться, поэтому я использовал отображение встроенного блока (-moz-inline-box). На самом деле один из моих любимых.

Вот рабочая копия

Протестировано в Safari 3, FireFox 3 и IE7.

    <style type="text/css">
ol{
    padding-left: 0;
    margin-left:0;
}

ol>li {
    list-style-type: none;
    margin-bottom: .5em;
}

ol>li input[type=radio] {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
}

ol>li label {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
}
</style>
person Ryan Florence    schedule 26.05.2009
comment
Это решение работает довольно хорошо, я проголосовал за него, но не принял, потому что хочу, чтобы оно работало и в IE6. - person Patrick Klingemann; 03.04.2010
comment
Идеально! КСТАТИ: Нет необходимости в отображении: встроенный блок на «входе». - person Jabe; 05.05.2011

arrow_upward
4
arrow_downward

Используя следующую разметку и css, я смог создать многострочные метки, которые не переносятся под переключателем:

<style type="text/css">
    fieldset input, label {
      float: left;
      display: block;
    }

    fieldset li {
      clear: both;
    }
</style>

<fieldset>
  <ol>
    <li>
      <input type="radio" id="x" />
      <label for="x">
        stuff<br/>
        stuff1
      </label>
    </li>
    <li>
      <input type="radio" id="x" />
      <label for="x">
        stuff<br/>
        stuff1
      </label>
    </li>
  </ol>
</fieldset>

однако я не смог использовать:

fieldset label {
  vertical-align: middle;
}

чтобы центрировать метку по вертикали на переключателе, даже при применении ширины (оба предложения в ответе Дмитрия Фаркова. Моя основная цель состояла в том, чтобы предотвратить перенос под переключателем, поэтому это решение пока подойдет.

person Patrick Klingemann    schedule 26.05.2009
comment
Но что, если текст метки представляет собой массу текста без явных разрывов строки? Произнесите 50 слов, и список выбора будет представлен в блоке div шириной 400 пикселей. Тогда все содержимое ярлыка будет представлено под вводом! Как мне это решить? - person UlfR; 12.05.2010
comment
Эта проблема, похоже, не возникает, если вы используете разметку из исходного вопроса. - person Patrick Klingemann; 15.05.2010
comment
После множества тестов мой ответ выше кажется лучшим решением. Вертикально центрированные метки не очень желательны для длинного текста. Представьте себе текст длиной в несколько абзацев. Вы действительно хотите, чтобы переключатель располагался вертикально по центру нескольких абзацев? Я сомневаюсь. Я выбираю это как ответ. - person Patrick Klingemann; 15.05.2010

arrow_upward
3
arrow_downward

Так как выше я спрашивал, как обращаться с очень длинными метками, и, наконец, решил это сам. Вот решение моей проблемы. Может быть, это могло бы помочь вам?

<style type="text/css">
  #master_frame { 
      background: #BBB;
      height: 300px;
      width: 300px;
  } 
  fieldset.radios { 
      border: none;
  } 
  fieldset fields { 
      clear: both;
  } 
  input { 
      float: left;
      display: block;
  } 
  label { 
      position: relative;
      margin-left: 30px;
      display: block;
  } 
</style>

<div id="master_frame">
  <fieldset class='radios'>
    <div class='field'>
      <input type="radio" id="a" />
      <label for="a">Short</label>
    </div>
    <div class='field'>
      <input type="radio" id="b" />
      <label for="b">
        A really long and massive text that does not fit on one row!
      </label>
    </div>
  </fieldset>
</div>
person UlfR    schedule 12.05.2010
comment
В IE6 есть проблема с этим: если текст метки короткий, метка и переключатель отображаются с отступом. - person Patrick Klingemann; 15.05.2010

arrow_upward
1
arrow_downward

Сделайте ввод и пометьте оба

float: left;
display: block;

Установите ширину для метки и ввода.

применять

clear: both;
 vertical-align: middle;

ко всем ли.

person Dmitri Farkov    schedule 26.05.2009
comment
даша, какая польза от этого? Просто любопытно. - person Patrick Klingemann; 26.05.2009
comment
Дмитрий, в IE, если на радиокнопках установлено значение float, они прилипают к верхней части блока. Я не уверен, но, вероятно, вам придется обернуть радиокнопки в промежутки и вместо этого использовать их, не так ли? - person Dasha Salo; 26.05.2009
comment
overflow: hidden и clear: оба реагируют по-разному, на мой взгляд, и требуется очистить оба, чтобы ли не пересекались друг с другом. Чтобы обеспечить правильное вертикальное выравнивание, я думаю, что для li должно быть установлено вертикальное выравнивание, а не метка, моя ошибка. - person Dmitri Farkov; 26.05.2009
comment
+1 Я смущен, почему это не было выбрано в качестве принятого решения, поскольку оно лаконичное и более раннее, чем текущее. - person Andre Figueiredo; 06.10.2017

arrow_upward
0
arrow_downward

Вы должны использовать white-space: normal; в метке для многострочного

person user2396701    schedule 21.09.2020