如何用dd和dt向左浮动

Question

我有2个标签和输入字段包装dt和dd标签.标签和输入字段位于不同的行上,总共有4行.我正在尝试设置它,使每个输入字段与其标签位于同一行,总共2行.我尝试float left了#dd1dd和dd2dd,但不起作用.有人可以向我解释如何在dd和dt存在的情况下完成这项工作吗？

<dt id="dt1">
   <label for="dd1">DD1 Label:</label>
</dt>
<dd id="dd1dd">
   <input name="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>

Answer 1

它们是块级元素,因此您必须给它们一个宽度并将它们向左浮动.否则他们会占用他们容器的整个宽度.

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