如何用dd和dt向左浮动

我有2个标签和输入域，它们被包装在dt和dd标签中。标签和输入字段分开，给我4条线。我试图对其进行设计，以便每个输入字段与其标签位于同一行上，总共2行。我尝试float left为#dd1dd和dd2dd但这不起作用。有人可以向我解释如何在dd和dt的情况下完成这项工作吗？如何用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>

来源

2010-11-12 sarimoto

他们是块级元素，所以你必须给他们一个宽度和浮动左边。否则它们将占据其容器的整个宽度。

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

来源

2010-11-12 01:51:30 Galen

<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似乎为我工作。上述代码是否按照您的想法行事？

//编辑

这也适用，如果你不喜欢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>

顺便说一下，这些内嵌样式是仅用于显示目的，当然，你应尽可能使用外部表。

来源

2010-11-12 01:52:00 Ben

快速测试在Firefox行之有效与浮动：左 http://jsfiddle.net/aNvyG/

任何特定的浏览器？

来源

2010-11-12 01:52:31 sunn0

您可以使用float和clear这样的：

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

这里是一个demo http://www.jsfiddle.net/fWeec/

来源

2010-11-12 01:53:08

如何用dd和dt向左浮动

回答

相关问题