如何用dd和dt向左浮动 [英] How to float left with dd and dt

问题描述

我有2个标签和输入字段，它们包装在 dt 和 dd 标签中.标签和输入字段在单独的行上，总共给我4行.我正在尝试设置其样式，以便每个输入字段与其标签在同一行上，共计2行.我尝试将#dd1dd 和 dd2dd 浮动到向左，但这不起作用.有人可以向我解释在dd和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="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; }

这篇关于如何用dd和dt向左浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！