Question

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

＆lt; def term＆gt;
＆lt; def desc＆gt;
＆lt; def desc＆gt;

我需要它们看起来像（注意多个DD）：

＆lt; def term＆gt; ＆lt; def desc＆gt; ＆lt; def desc＆gt;
＆lt; def term＆gt; ＆lt; def desc＆gt; ＆lt; def desc＆gt;
＆lt; def term＆gt; ＆lt; def desc＆gt; ＆lt; def desc＆gt;

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

＆lt; def term＆gt; ＆lt; def desc＆gt; ＆lt; def desc＆gt; ＆lt; def desc＆gt; ＆lt; def desc＆gt; ＆lt; def desc＆gt; ＆lt; def desc＆gt;
＆lt; def term＆gt;
＆lt; def term＆gt;

有没有人找到解决这个问题的方法，我真的希望避免在可能的情况下添加额外的标记，但是不能将它们改为无序列表：（

提前致谢

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

Answer 2

默认样式表

dt，dd {float：left;}
dd + dt {clear：left; }

即6＆amp; 7个样式表：

dt {float：none;} dd { 位置：相对; 上：-19px; / 取决于你的行高 / }

IE6

http://code.google.com/p/ie7-js/

希望有所帮助。

Answer 3

你有没有尝试清除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非常讨厌且非语义。希望其他人能想出更好的解决方案。：）

Answer 4

只是give them all layout，最简单的方法是使用CSS属性。你的东西 { zoom：1; }

Answer 5

这很有效（诚然，只在Ubuntu 8.04上的FF 3.x.x和Opera 9.x上测试过）：

<强> CSS ：

p {
    display: block;
}
dl {
    display: block;
    margin: 0;
}
dt {
    display: block;
    width: 7em;
    border-right: 1px solid #ccc;
    margin: 0;
}
dd {
    display: none;
    margin: 0;
    position: relative;
    /* 'position: absolute' would probably work better, 
        and lose the line break left by the 'position: relative;' */
    top: -1em;
    left: 8em;
}
dt:hover + dd, dt:hover + dd + dd {
   /* Couldn't find a way to target all sibling 
      dds of a dt without the + operator (and listing all of them),
      but it works, albeit kludgy */
    display: inline;
}
dd:after {
    content:"; ";
}
dd:last-child:after {
    content:"";
}

<强> HTML ：

<div id="content">
    <dl>
        <dt>first dt</dt><dd>first dt's first dd</dd><dd>first dt's second</dd>
        <dt>second dt</dt><dd>second dt's first dd</dd><dd>second dt's second</dd>
        <dt>third dt</dt><dd>third dt's third dd</dd><dd>third dt's second</dd>
    </dl>
</div>

链接到工作示例，在FF 3和Opera 9.x下测试：
http://www.davidrhysthomas.co.uk/so/dls.html

内联显示定义术语和描述

5 个答案: