HTML/CSS:在同一行显示DT/DD时避免下推DD

Question

我试图避免在 DL 中包含比一行可容纳更多的文本时下推左浮动 DD。

这里的例子：http://jsfiddle.net/hw2wM/7/前两个 DD 对齐。但是，第三个应该与前两个 DD 保持一致，而是向下推并占用整个宽度......

我想保留的功能：

• 当 DT 文本太宽时，DD 会优雅地向右推送。
• 无固定宽度
• 与空 DD 保持对齐
• 两个 DL 并排显示

Answer 1

这是您的演示的修改版本：小链接。两个变化：

• float: left; 在 dd s 更改为 overflow: hidden;
• 增加： dd:nth-of-type(n+2) { margin-top: 10px; }

Answer 2

最终答案，希望能节省某人的时间...

最灵活的答案。http://jsfiddle.net/SeYzF/1/

感谢@Abody97展示领先。

主要功能，除了Abody97建议：

dd:after {content:' '; white-space:pre;}

保持 dd 在空时未对齐

div.table { 显示：表格; 宽度： 100%; } div.table> * { 显示：表格单元格; }

并排显示两个 DL