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

Question

我试图在包含更多文本时避免在DL中左下浮动DD，而不是在一行中。

此处示例： http://jsfiddle.net/hw2wM/7/ 两个第一个DD对齐。然而，第三个应该保持与前两个DD对齐，而是按下它并占据整个宽度......

我想保留的功能：

• 当DT文本太宽时，DD会正常向右推。
• 没有固定宽度
• 与空DD对齐，
• 两个DL并排显示

Answer 1

以下是您演示的修改版本：little link。两个变化：

{li} float: left;中的dd已更改为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＆gt; * {       显示：table-cell;   }

并排显示两个DL