hacer que los campos de entrada de texto y sus etiquetas se alinean correctamente

Question

He aquí un extracto de una forma rieles bastante estándar:

<p> 
    <%= f.label :from_station %> <%= f.text_field :from_station %> 
    </p> 
    <p> 
    <%= f.label :to_station %> <%= f.text_field :to_station %> 
    </p> 

Por defecto, ello convierte así:

alt text http://img412.imageshack.us/img412/127/picture6u.png

Esto no tiene' se ven muy bien ya que los campos de texto no se alinean. ¿Cuál es la manera más fácil de hacer que el formulario se vea más como esto:

alt text http://img193.imageshack.us/img193/746/picture7shk.png

He tratado de establecer la propiedad width estilo de los <label> s, pero no parece que esta propiedad para hacer cualquier cosa.

Answer 1

creo que esto es más una cuestión de CSS;

Las etiquetas de forma predeterminada no son un elemento de nivel de bloque y, por lo tanto, no aceptarán un ancho. Intente configurar este CSS:

label{ 
    width: 4em; 
    float: left; 
    text-align: right; 
    margin-right: 0.5em; 
    display: block 
} 

Espero que ayude!

Answer 2

Se puede utilizar un <table> que cada etiqueta se encuentra en la columna 1 y cada campo de texto está en la columna 2.