我正在使用页面上某些元素的定义列表,并需要它们以内联方式显示,例如：它们通常如下所示：
< 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
