CSS: <DL> 与 dt/dd 对之间的间距/边距

Question

我有以下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>

我想把它排成这样（而不是把术语和定义放在一起的普通 dl）：

Item 1    Value 1
Item 2    
Item 3    Value 1
          Value 2
          Value 3

这不是问题。问题是我想在每个术语/定义对之间添加一个边距。问题是定义的高度不同（它们的范围在 0 到 5 个列表项之间），所以我不能在 dd 标签上应用相同的边距。

Answer 1

怎么样？

dt, dd { display: block; float: left; margin-top: 20px; }
dt { clear: both; }

Answer 2

你的意思是这样的：

Item 1    Value 1

Item 2    

Item 3    Value 1
          Value 2
          Value 3

因为我不明白为什么不能在 dd 元素上应用边距。我做了一个快速实验，使用以下 CSS：

ul { 
  margin: -1.2em 0 0 100px; 
  padding: 0; 
}

dd { 
  margin-bottom: 10px;
}

这似乎有你需要的效果。

Answer 3

您的“第 2 项”dd 真的是空的还是其中有  ？如果为空，则很难让 dt/dd 正确排列，因为其他 dd 的高度为 20px（例如），而空 dd 的高度为 0。

注意顶部边距，您必须将其应用于 dt 和 dd。

我更喜欢在 dd 的底部使用填充。它给出了更一致的结果。

dt {
    float: left;
    clear: left;
    width: 8em;
    }
 dd {
    margin: 0 0 0 9em;
     padding: 0 0 2.5em 0;
    }

Answer 4

我认为正确使用dl、dt 和dd 不是在dd 中使用ul li，而是使用不同的dd。在我看来，您在一个元素中使用了一个列表，该元素本身就是用于列出的。

<dl>
    <dt>Item 1</dt>
    <dd>Value 1</dd>
    <dt>Item 2</dt>
    <dd>
       &nbsp;
    </dd>
    <dt>Item 3</dt>
    <dd>Value 1</dd>
    <dd>Value 2</dd>
    <dd>Value 3</dd>
</dl>

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