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; }

Answer 2

你可以像这样使用float和clear：

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

这是demo http://www.jsfiddle.net/fWeec/

Answer 3

<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似乎对我有用。以上代码是否按照您的想法行事？

// EDIT

如果您不喜欢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>

顺便提一下，这些内联样式仅用于显示目的，当然您应尽可能使用外部表格。

Answer 4

Firefox中的快速测试适用于float：left http://jsfiddle.net/aNvyG/

任何特定的浏览器？

如何用dd和dt向左浮动

4 个答案: