Make text input fields and their labels line up correctly

Question

Here's an excerpt from a fairly 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, this renders like this:

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

This doesn't look great since the text fields don't line up. What's the easiest way to make the form look more like this:

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

I've tried setting the width style property on the <label>s, but this property doesn't seem to do anything.

Answer 1

I think this is more of a CSS question;

Labels by default aren't a block level element and so won't accept a width. Try setting this CSS:

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

Hope that helps!

Answer 2

You can use a <table> where each label is in column 1 and each textfield is in column 2.