CSS Form styling with multiple controls on one line

Question

I want to make a CSS form with multiple textbox/label combinations on a single line. Most examples I see show each line getting a separate form field.

For example, I'd like Last Name and First Name textboxes on one line and Phone Number on a second line.

Answer 1

You could use CSS in relation to this, but it's not specifically a CSS problem. Something as simple as this should work:

<label for="last_name">Last Name:</label> <input type="text" id="last_name" name="last_name" />
<label for="first_name">First Name:</label> <input type="text" id="first_name" name="first_name" />
<br />
<label for="phone">Phone Number:</label> <input type="text" id="phone" name="phone" />

As I said, CSS could be related, for example if you have inputs or labels defined as display:block instead of display:inline, line-breaks will be added, but it shouldn't happen by default.

Answer 2

Lots of ways to do that. Chad shows one. Here's another:

HTML:

<label id="LNameField" for="LName">Last Name 
   <input id="LName" type="text">
</label>
<label id="FNameField" for="FName">First Name 
   <input id="FName" type="text">
</label>
<label id="PhoneField" for="Phone">Phone Number 
   <input id="Phone" type="text">
</label>

CSS:

label
{
   display: block;
   float: left;
}

#PhoneField { clear: both; }