css - 内联显示定义术语和描述

Question

我正在为页面上的某些元素使用定义列表，并需要它们以内联方式显示，例如:它们通常看起来像:

<定义描述>
<定义描述>

我需要它们看起来像(注意多个 DD):

我可以在 moz 中使用 float 让它们正常工作，但无论我尝试什么，它们都无法在 IE 中工作，我通常会得到类似的东西:

有没有人找到解决这个问题的方法，我真的很想尽可能避免添加额外的标记，但没有将它们更改为无序列表我没有想法:(

提前致谢

Answer 1

注意:您必须避免 DD 元素之间的空格才能正常工作。

无需对 IE8+ 进行修改:

dd,
dt{
    display: inline;
    margin: 0;
}
dd:before {
    content: ' '; /* space them */
}
dt:before { /* insert line break before <dt> */
    content:"\A";
    white-space:pre;
}
dt:first-child:before { /* disable line break before the first <dt> */
    content: none;
}

如果您不需要支持 IE8，请跳过第 4 条 CSS 规则，只需将此选择器用于第 3 条:dt:not(:first-child):before

结果应该是这样的:(demo)

DT DD DD
DT DD DD

如果你想变得真正的酷，你可以用这个替换第二条规则:

dd + dd:before {
    content: ', '; /* add comma between definitions */
}

dt:after {
    content: ':';
}

结果应该是这样的:(demo)

DT: DD, DD
DT: DD, DD