How to float left with dd and dt

I have 2 labels and input fields that are wrapped in dt and dd tags. The label and input field are on separate lines giving me 4 lines total. I'm trying to style it so that each input field is on the same line as its label, for a total of 2 lines. I tried float left for #dd1dd and dd2dd but that doesn't work. Can someone explain to me how to get this done in the presence of dd and dt?

<dt id="dt1">
   <label for="dd1">DD1 Label:</label>
</dt>
<dd id="dd1dd">
   <input name=开发者_JS百科"dd1" id="dd1" value="" type="text">
</dd>

<dt id="dt2">
   <label for="dd2">DD2 Label:</label>
</dt>
<dd id="dd2dd">
   <input name="dd2" id="dd2" value="" type="text">
</dd>

they are block level elements so you must give them a width and float them left. otherwise they will take up the entire width of their container.

dt { width: 150px; clear:left } // clear to force it to the next line
dd { width: 300px; }
dt, dd { float:left; }

You can use float and clear like this:

#dd1dd, #dd2dd {
    float:left;
    clear:right;
}
#dt1, #dt2 {
    float:left;
    clear:left;
}

here is a demo http://www.jsfiddle.net/fWeec/

<dt id="dt1" style='float:left'>
  <label for="dd1">DD1 Label:</label>
</dt>
<dd id="dd1dd" style='float:left'>
   <input name="dd1" id="dd1" value="" type="text">
</dd>

<dt id="dt2" style='clear:both;float:left'>
   <label for="dd2">DD2 Label:</label>
</dt>
<dd id="dd2dd" style='float:left'>
   <input name="dd2" id="dd2" value="" type="text">
</dd>

float:left seems to work for me. Does the above code act the way you have in mind?

//EDIT

This also works, if you don't like float

<dt id="dt1" style='display:inline-block'>
 <label for="dd1">DD1 Label:</label>
</dt>
<dd id="dd1dd" style='display:inline-block'>
   <input name="dd1" id="dd1" value="" type="text">
</dd>

<br />

<dt id="dt2" style='display:inline-block'>
   <label for="dd2">DD2 Label:</label>
</dt>
<dd id="dd2dd" style='display:inline-block'>
   <input name="dd2" id="dd2" value="" type="text">
</dd>

Incidentally, these inline styles are for display purposes only, of course you should use external sheets whenever possible.

Quick test in Firefox works well with float:left http://jsfiddle.net/aNvyG/

Any specific browser?