如何水平对齐HTML定义列表(<dl>)而不限制高度中的术语或定义？

Question

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

术语和定义都可以很长,因此它们可以比可用宽度更宽并且将包裹.

使用我的CSS,我对包装的定义没有问题,因此高于相应的术语.但是在极少数情况下,当术语包装并且高于相应的定义时,我没有得到以下定义来正确清除.

您可以在我的jsFiddle中看到这一点,其中定义"555"未与术语"555"正确对齐.

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

任何有关如何解决这个问题的帮助真的很感激.要求:

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

Answer 1

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

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

伪元素将清除浮动<dd>元素,这将确保下一个元素<dt>在新行上开始.

见演示:http://jsfiddle.net/audetwebdesign/TXYGk/