Fai campi di input di testo e le loro etichette allineano correttamente

Question

Ecco un estratto da un modulo di Rails abbastanza standard:

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

Per impostazione predefinita, questo rende in questo modo:

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

Questo doesn' sembrano grandi perché i campi di testo non sono allineati. Qual è il modo più semplice per fare la forma più simile a questo:

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

Ho provato impostando la proprietà width stile sulle <label> s, ma questa proprietà non sembra di fare nulla.

Answer 1

Penso che questo è più di una domanda CSS;

Le etichette di default non sono un elemento a livello di blocco e quindi non accettano una larghezza. Prova a impostare questo CSS:

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

Sperare che aiuti!

Answer 2

È possibile utilizzare un <table> dove ogni etichetta è nella colonna 1 ed ogni campo di testo è nella colonna 2.