CSS：<DL> 与 dt/dd 对之间的间距/边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/896815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: <DL> with spacing/margin between the dt/dd pairs
提问by Gidon
I have the following html:
我有以下 html：
<dl>
<dt>Item 1</dt>
<dd>
<ul>
<li>Value 1</li>
</ul>
</dd>
<dt>Item 2</dt>
<dd>
<!-- this item is missing a value -->
</dd>
<dt>Item 3</dt>
<dd>
<ul>
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
</ul>
</dd>
</dl>
I would like to lay it out like (instead of the normal dl which puts the term and definitions under each other):
我想把它布置成（而不是将术语和定义放在一起的普通 dl）：
Item 1 Value 1
Item 2
Item 3 Value 1
Value 2
Value 3
Which is not a problem. The problem is that I would like to add a margin between each term/definition pair. The problem is that the definitions are not the same height (they range between 0 up to 5 list items), so I cannot apply the same margin on the dd tags.
这不是问题。问题是我想在每个术语/定义对之间添加一个边距。问题是定义的高度不同（它们的范围在 0 到 5 个列表项之间），所以我不能在 dd 标签上应用相同的边距。
回答by Rytmis
How's this?
这个怎么样？
dt, dd { display: block; float: left; margin-top: 20px; }
dt { clear: both; }
回答by waxwing
Do you mean something like:
你的意思是这样的：
Item 1 Value 1
Item 2
Item 3 Value 1
Value 2
Value 3
Because then I don't see why you can't apply the margin on the dd elements. I did a quick experiment, using the following CSS:
因为那时我不明白为什么不能在 dd 元素上应用边距。我使用以下 CSS 做了一个快速实验：
ul {
margin: -1.2em 0 0 100px;
padding: 0;
}
dd {
margin-bottom: 10px;
}
Which appears to have the effect you need.
这似乎有你需要的效果。
回答by Emily
Is your 'Item 2' dd truly empty or does it have a in it? If it is empty, it will be hard to get the dt/dd to line up correctly because the other dd's will have a height of 20px (for example) and the empty dd will have a height of 0.
您的“项目 2”dd 真的是空的还是里面有一个 ？如果它是空的，将很难让 dt/dd 正确排列，因为其他 dd 的高度为 20px（例如），而空 dd 的高度为 0。
Be careful with the margin-top, you will have to apply it to both the dt and dd.
小心 margin-top，你必须将它应用到 dt 和 dd。
I prefer to use padding on the bottom of the dd. It gives more consistent results.
我更喜欢在 dd 的底部使用填充。它提供了更一致的结果。
dt {
float: left;
clear: left;
width: 8em;
}
dd {
margin: 0 0 0 9em;
padding: 0 0 2.5em 0;
}
回答by Savantas
I think the proper use of dl, dtand ddis not using ulli's within a dd, but instead use different dd's. It seems to me you are using a list within an element which is itself for listing.
我认为正确使用dl,dt而dd不是ulli在 a 中使用's dd，而是使用不同的dd's 。在我看来，您正在使用一个本身用于列表的元素中的列表。
<dl>
<dt>Item 1</dt>
<dd>Value 1</dd>
<dt>Item 2</dt>
<dd>
</dd>
<dt>Item 3</dt>
<dd>Value 1</dd>
<dd>Value 2</dd>
<dd>Value 3</dd>
</dl>
For CSS you could use this:
对于 CSS，你可以使用这个：
DL {
PADDING: 0; MARGIN: 0; }
DT {
POSITION: relative; PADDING: 0; MARGIN: 0; TOP: 1.2em; LEFT: 0px; }
DD {
PADDING: 0; MARGIN: 0 0 0 5em; }
