<dl><dt> not inline?!

Hi,

I was just wondering how I could style my <DT><DD> on my site so that the title and the form field were inline?!:


<dl>
<dt><label for="Title">* Title:</label></dt>
<dd><input type="text" size="30" value="" id="Title" name="!Title"></dd>

<dt><label for="First_Name">* First Name:</label></dt>
<dd><input type="text" size="30" value="" id="First_Name" name="!First_Name"></dd>

<dt><label for="Surname">* Surname:</label></dt>
<dd><input type="text" size="30" value="" id="Surname" name="!Surname"></dd>

<dt><label for="Address_Line_1">* Address Line 1:</label></dt>
<dd><input type="text" size="30" value="" id="Address_Line_1" name="!Address_Line_1"></dd>

<dt><label for="Address_Line_2">Address Line 2:</label></dt>
<dd><input type="text" size="30" value="" id="Address_Line_2" name="Address_Line_2"></dd>

<dt><label for="Address_Line_3">Address Line 3:</label></dt>
<dd><input type="text" size="30" value="" id="Address_Line_3" name="Address_Line_3"></dd>

<dt><label for="Town">* Town:</label></dt>
<dd><input type="text" size="30" value="" id="Town" name="!Town"></dd>

<dt><label for="Post_Code">* Post Code:</label></dt>
<dd><input type="text" size="30" value="" id="Post_Code" name="!Post_Code"></dd>

<dt><label for="Email">* Email:</label></dt>
<dd><input type="text" size="30" value="" id="Email" name="!Email"></dd>

<dt><label for="Telephone">* Telephone:</label></dt>
<dd><input type="text" size="30" value="" id="Telephone" name="!Telephone"></dd>
</dl>


CSS:


dl {
overflow: hidden;
margin: 2em 0;
width: 38.5em;
}
dt {
float: left;
width: 13em;
margin: 0 1em 0 0;
font-size: 1.2em;
line-height: 1.6em;
}
dt label {
display: block;
text-align: right;
line-height: 2em;
}
dd {
float: left;
width: 17.5em;
font-size: 1.2em;
line-height: 1.6em;
}
dd span {
line-height: 2.1em;
}
dd input {
line-height: 1.6em;
border: 0.1em solid #006140;
margin: 0 0 0.5em 0;
width: 15em;
}
dd input.checkbox, dd input.radio {
margin: 0.5em 0 1em 0;
border: 0;
width: auto;
}

First of all, that’s not the appropriate mark-up for a form. “dl” means “definition list” where “dt” is the “definition term” and “dd” the “definition description”. A definition list is more suited for dictionary kind of things.

A good way to mark up a form is like this:

<form>
<div>
<label></label>
<input>
</div>
<div>
<label></label>
<input>
</div>
<div>
<label></label>
<input>
</div>
…
<form>

Optionally, you can wrap fieldsets (<fieldset>) around certain parts to group fields.

Now, the above code will show labels and associated inputs on one line by default with the divs starting new lines each. If you decide to change it so that the label text should show up above the inputs then you can change the inputs to display: block;. That’s the most flexible and semantically useful way to mark up a form.