¿Cómo alineo verticalmente conjuntos de botones de radio?

Soy nuevo en html y css.¿Cómo alineo verticalmente conjuntos de botones de radio?

Tengo 3 juegos de botones de opción. Cada conjunto de botones se muestra en una línea singe. Me gustaría que los botones se alineen verticalmente entre conjuntos de botones. Estoy teniendo problemas para lograr esto con CSS. Me gustaría evitar el uso de tablas para resolver este problema. Pensé que podría alinear los botones de radio ajustando el ancho de sus etiquetas, pero no funciona.

Mis botones de radio pantalla como esta:

misaligned radio buttons

que desea que aparezcan como esto:

aligned radio buttons

Aquí es mi css:

form.remit_change_form label.fixedwidth { 
    display: block; 
    width: 180px; 
    float: left; 
} 

form.remit_change_form input.radiolabel { 
    width: 35px /* doesn't make any visual change! */ 
}

Aquí es mi html:

<div> 
    <label for="tran_code" class="fixedwidth">Tran Code</label> 
    <input type="radio" class="radioinput" name="tran_code" id="tran_code_22" 
    value="22"/> 
    <label for="tran_code_22" class="radiolabel">22</label> 
    <input type="radio" class="radioinput" name="tran_code" id="tran_code_42" 
    value="42"/> 
    <label for="tran_code_42" class="radiolabel">42</label> 
    <input type="radio" class="radioinput" name="tran_code" id="tran_code_52" 
    value="52"/> 
    <label for="tran_code_52" class="radiolabel">52</label> 
    <input type="radio" class="radioinput" name="tran_code" id="tran_code_na" 
    value="NA"/> 
    <label for="tran_code_na" class="radiolabel">NA</label> 
</div> 
<div> 
    <label for="cut_off_time" class="fixedwidth">Cut-off Time</label> 
    <input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_18.00" 
    value="18.00"/> 
    <label for="cut_off_time_18.00" class="radiolabel">18.00</label> 
    <input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_19.00" 
    value="19.00"/> 
    <label for="cut_off_time_19.00" class="radiolabel">19.00</label> 
    <input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_na" 
    value="NA"/> 
    <label for="cut_off_time_na" class="radiolabel">NA</label> 
</div> 
<div> 
    <label for="remit_notify_method" class="fixedwidth">Remit Notify Method</label> 
    <input type="radio" class="radioinput" name="remit_notify_method" 
    id="remit_notify_method_n" value="N"/> 
    <label for="remit_notify_method_n" class="radiolabel">N</label> 
    <input type="radio" class="radioinput" name="remit_notify_method" 
    id="remit_notify_method_f" value="F"/> 
    <label for="remit_notify_method_f" class="radiolabel">F</label> 
    <input type="radio" class="radioinput" name="remit_notify_method" 
    id="remit_notify_method_e" value="E"/> 
    <label for="remit_notify_method_e" class="radiolabel">E</label> 
</div>

Fuente

2011-03-22 Steven Rumbalski

¿ha considerado poniéndolos en una mesa? – LostLin

Consejo contra el uso de tablas si no son datos tabulares, especialmente cuando no es complicado lograrlo en css –

Este es un lugar casi perfecto para una mesa. Tal vez usted también ha sido aterrorizado por la Policía de diseño :-) –

Usted no tiene que utilizar las clases, si no es necesario en caso contrario (edición: eran necesarios, por lo que la respuesta ha sido actualizado).

form.remit_change_form label.radiolabel 
{ 
    display:inline-block; /* added this */ 
    width: 50px; 
} 

form.remit_change_form label.fixedwidth { 
    width: 180px; 
}

Fuente

2011-03-22 16:15:16

Esto funciona. ¿Te importa si edito la respuesta antes de aceptarla? No necesito la regla css para 'form.remit_change_form input [type = radio]' ya que el ancho predeterminado es bueno. Necesito cambiar la regla para 'form.remit_change_form label' a' form.remit_change_form label.radiolabel'; de lo contrario, las etiquetas de mi casilla de verificación se comprimirán. –

La forma abreviada de esta respuesta es que necesitaba agregar 'display: inline-block' a mi regla para' form.remit_change_form label.radiolabel'. –

¿Por qué no darse más elementos HTML para trabajar? Si se opone al uso de tablas, ¿qué le parece usar una lista desordenada?

http://jsfiddle.net/YYjsT/

Fuente

2011-03-22 16:21:47

Buen trabajo. Pero esto no muestra cómo lo solicité. Estos botones son parte de una forma mucho más grande, mostrando así rompe el flujo del resto del formulario. –

Esto funcionó bien para apilar radios verticalmente. Muy simple pero efectivo. –

Ponerlo en una mesa que funciona muy bien

http://jsfiddle.net/3QJg8/

Fuente

2011-03-22 16:22:43 LostLin

Tengo la tentación de -1 las respuestas que usan tablas ya que la pregunta especifica que no quiero usarlas (e implica que sé cómo). Pero no los votaré porque reconozco que usted respondió de buena fe. Creo que el lugar para discutir las tablas estaría en los comentarios bajo la pregunta. –

¿Cómo alineo verticalmente conjuntos de botones de radio?

Respuesta

Cuestiones relacionadas