Layout form fields without tables

Question

I have a very simple HTML layout I'm trying to implement. It is something like this:

A Label:         [Input                ]
Another Label:   [Input                ]
The Last Label:  [Input                ]

In the past, I'd just go ahead and use a table for this. Otherwise, it's a pain getting the input controls to line up correctly.

Can anyone suggest a simple and reliable way to implement this layout without using a table?

Thanks.

Answer 1

You can use display: inline-block

<style type="text/css">
  label { display: inline-block; width: 200px; }
  ul { list-style: none; }
</style>

<ul>
  <li><label for="input1">A Label:</label> <input type="text" name="input1" id="input1"></li>
  <li><label for="input2">Another Label:</label> <input type="text" name="input2" id="input2"></li>
  <li><label for="input3">The Last Label:</label> <input type="text" name="input3" id="input3"></li>
</ul>

However, in order for this to line up vertically, you either have to wrap the label-input pairs in another tag (such as <li> or <div>) or put linebreaks after the inputs.