¿Cómo puedo hacer etiquetas alineadas en línea, horizontal y verticalmente para botones de opción en formularios HTML con CSS?

Question

Suponiendo que el siguiente marcado:

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

Cómo hacer etiquetas de los botones de radio estilo I para que se vea como la siguiente en la mayoría de los navegadores (IE6 +, FF, Safari, Chrome:

Answer 1

Utilizando el siguiente marcado y CSS que era capaz de producir etiquetas de múltiples líneas que no envuelven bajo el botón de radio:

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

sin embargo he podido utilizar:

fieldset label { 
    vertical-align: middle; 
} 

a centra la etiqueta verticalmente en el botón de radio, incluso cuando se aplica un ancho (ambas sugerencias en la respuesta de Dmitri Farkov. Mi propósito principal era evitar envolverlo con el botón de opción, por lo que esta solución estará bien por el momento.

Answer 2

Hacer de entrada y la etiqueta de ambos

float: left; 
display: block; 

Set de anchura para la etiqueta y de entrada.

---

aplican

clear: both; 
vertical-align: middle; 

a todo el li de.

Answer 3

Creo que esto lo hace todo. Sin embargo, no mencionó que tiene que validar, así que usé la pantalla de bloque en línea (-moz-inline-box). Uno de mis favoritos, en realidad.

Here's a working copy

probado en Safari 3, FireFox 3, y 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

Desde que le pregunté cómo manejar las etiquetas realmente largas de arriba, y finalmente lo resolví yo mismo. Aquí está la solución a mi problema. Tal vez podría ayudarte?

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