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

Question

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

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

Answer 1

Используя следующую разметку и 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; 
} 

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

Answer 2

Make ввод и маркировать как

float: left; 
display: block; 

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

---

применять

clear: both; 
vertical-align: middle; 

ко всем Ли.

Answer 3

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

Here's a working copy

Испытано в 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> 

Answer 4

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

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