css - 如何使用 dd 和 dt 向左浮动

Question

我有 2 个标签和输入字段，它们包含在 dt 和 dd 标签中。标签和输入字段在不同的行上，总共有 4 行。我正在尝试设计它的样式，以便每个输入字段与其标签位于同一行，总共 2 行。我为 #dd1dd 和 dd2dd 尝试了 float left 但这不起作用。有人可以向我解释如何在 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

它们是 block 级元素，所以你必须给它们一个宽度并让它们向左浮动。否则它们将占据容器的整个宽度。

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