我正在使用页面上某些元素的定义列表,并需要它们以内联方式显示,例如：它们通常如下所示：
< 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>
有没有人找到这个问题的解决方案,我真的想避免在可能的情况下添加额外的标记,但是没有将它们改为无序列表我的想法:(
提前致谢
解决方法
注意：您必须避免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
