Faire des champs de saisie de texte et leurs étiquettes sont correctement alignées

Question

Voici un extrait d'un formulaire Rails assez standard:

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

Par défaut, ce qui rend comme ceci:

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

Ce n » t fière allure puisque les champs de texte ne s'alignent pas. Quelle est la meilleure façon de rendre la forme ressemble plus à ceci:

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

J'ai essayé de placer la propriété de style width sur les <label> s, mais cette propriété ne semble pas faire quoi que ce soit.

Answer 1

Je pense que cela est plus une question de CSS; Les étiquettes par défaut ne sont pas un élément de niveau bloc et n'accepteront donc pas une largeur. Essayez de mettre ce CSS:

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

Espérons que ça aide!

Answer 2

Vous pouvez utiliser un <table> où chaque étiquette est dans la colonne 1 et chaque textfield est dans la colonne 2.