Question

我经常使用以下代码创建表而不使用HTML表标记。也许我应该开始使用表格标签，但这不是问题。

如果<dd>标记为空，则下一个<dt>标记不会向左浮动并位于其自己的行上，但是将 添加到<dd>标记会使其执行如此。

为什么需要 ，如何更改CSS以便不需要？

dl.table dt, dl.table dd {
    overflow: hidden;
    padding-top:3px;
    padding-bottom:2px;
}
dl.table dt {
    float:left;
    width: 200px;
}

<dl class="table">
    <dt>Title</dt><dd>bla</dd>
    <dt>Title</dt><dd>bla</dd>
    <dt>Title</dt><dd></dd>
    <dt>Title</dt><dd>bla</dd>
    <dt>Title</dt><dd>bla</dd>
    <dt>Title</dt><dd>&nbsp;</dd>
    <dt>Title</dt><dd>bla</dd>
</dl>

Answer 1

dd与其他块元素一样，如果没有内容则会崩溃。但是，您可以为他们提供height（或min-height），border，或使用::before或::after伪元素为其提供内容。你会发现它们并没有真正消失，如果没有内容，它们默认只有零高度。

＆＃13;

dl.table dt, 
dl.table dd {
    overflow: hidden;
    padding-top:3px;
    padding-bottom:2px;
}
dl.table dt {
    float:left;
    width: 200px;
}

dl.table dd { border: 1px solid blue; min-height: 1em;}
}

＆＃13;

<dl class="table">
    <dt>Title</dt><dd>bla</dd>
    <dt>Title</dt><dd>bla</dd>
    <dt>Title</dt><dd></dd>
    <dt>Title</dt><dd>bla</dd>
    <dt>Title</dt><dd></dd>
    <dt>Title</dt><dd>&nbsp;</dd>
    <dt>Title</dt><dd>bla</dd>
</dl>

＆＃13;

Answer 2

空元素不会生成，因此它们没有大小。您可以在设置min-height时通过CSS解决此问题：

dt {
    clear: left;
}

dt, 
dd {
    min-height: 1em;
}

Answer 3

原因是因为你是浮动dt元素所以没有任何内容的dd不会占用任何页面空间，因此为什么下一个dt元素出现在另一个元素旁边。快速修复只是添加clear：left到你的tss中的td元素。

dl.table dt {
    clear:left;
    float:left;
    width: 200px;
}

Answer 4

Here是关于它的好文章。而且，stackpost here。

为什么在HTML描述列表中需要`

4 个答案: