内联显示定义术语和描述

Question

我正在使用页面上某些元素的定义列表,并需要它们显示内联,例如:它们通常如下所示:

<def term>
        <def desc>
        <def desc>

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

<def term> <def desc> <def desc>
<def term> <def desc> <def desc>
<def term> <def desc> <def desc>

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

<def term> <def desc> <def desc> <def desc> <def desc> <def desc> <def desc>
<def term>
<def term>

有没有人找到这个问题的解决方案,我真的想避免在可能的情况下添加额外的标记,但是没有将它们改为无序列表我的想法:(

提前致谢

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

结果应该是这样的:( 演示)

DT DD DD
DT DD DD

如果你想要真正酷,你可以用这个替换第二个规则:

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

dt:after {
    content: ':';
}

结果应该是这样的:( 演示)

DT: DD, DD
DT: DD, DD

Answer 2

您是否尝试过清除 dt 中的浮动？像这样：

dt { clear: left; }
dd { float: left; }

编辑：这是一个验证的跨浏览器解决方案：

dd,dt{ display: inline; }

<dl>
 <dt>1</dt><dd>1.1</dd><dd>1.2<br/></dd>
 <dt>2</dt><dd>2.1</dd><dd>2.2<br/></dd>
</dl>

然而，正如您所看到的，那个 br 非常令人讨厌并且不符合语义。希望其他人能够提出更好的解决方案。:)