html - 如何在不限制术语或定义高度的情况下水平对齐 HTML 定义列表 (<dl>)？

Question

我正在尝试水平对齐 HTML 定义列表，因此术语在左侧，定义在右侧。

term 和 definition 都可以很长，所以它们可以比可用宽度更宽并且会换行。

在我的 CSS 中，我对 wrap 的定义没有问题，因此高于相应的术语。但在极少数情况下，当术语换行并高于相应的定义时，我无法正确清除以下定义。

您可以在我的 jsFiddle 中看到这一点，其中定义“555”与术语“555”没有正确对齐。

http://jsfiddle.net/jmuheim/kjf8f/

非常感谢任何有关如何解决此问题的帮助。要求:

• 我希望定义使用右侧所有可用的水平空间，所以我不想为 <dd> 使用固定宽度标签。
• 我不希望定义在任何情况下都位于相应的术语之下。

Answer 1

这可能会成功。添加以下 CSS 规则:

dd:after {
    content: '';
    display: block;
    clear: both;
}

伪元素会清除 float 的<dd>元素，这将确保下一个 <dt>另起一行。

查看演示:http://jsfiddle.net/audetwebdesign/TXYGk/