Make the text input fields and their labels correctly aligned

Question

Here's an excerpt from a pretty standard Rails form:

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

By default, it looks like this:

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

This does not look great, as the text fields do not line up. The easiest way to make the form is as follows:

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

I tried setting the width style property to <label> s, but this property does nothing.

Answer 1

I think this is more of a CSS question,

Shortcuts are not a block level element by default and therefore do not accept widths. Try installing this CSS:

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

Hope this helps!

Answer 2

You can use <table> , where each label is in column 1, and each text field is in column 2.