1

我有一个包含and<DL>组的元素<DT><DD>

我目前看起来像这样：

AAAAA   111111
        222222
        333333
BBBBB   111111
        222222
        333333

我试图在它们之间放置空间，<DT>所以它看起来像这样：

AAAAA   111111
        222222
        333333

BBBBB   111111
        222222
        333333

如何让 CSS 在 DT 元素之间应用空间，同时保持整体间距？

这是我目前的CSS：

dl { padding: 25px 0px 25px 0px; }

dt {
    clear: left;
    float: left;
    text-align: left;
    width: 90px;
}

dd {
    margin: 0 0 0 90px;
    padding: 0 0 0 0;
}

HTML是：

<dl>
<dt>AAAAAAA</dt>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>    

<dt>BBBBBBBB</dt>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>    
</dl>
4

1 回答 1

5

您需要为dt元素添加填充或边距，以及dd紧跟在dt.

使用您现有的代码，只需添加以下内容：

dt, dt+dd {
    margin-top:15px;
}

如果您不希望第一个具有填充，则使用first-of-type选择器在第一个上覆盖它。再次添加以下内容：

dt:first-of-type, dt+dd:first-of-type {
    margin-top:0px;
}

这里的 jsFiddle 示例：http: //jsfiddle.net/C2FRn/

（请注意，这first-of-type不适用于 IE8 或更早版本；有一些技巧可以解决它，但如果您需要 IE8 支持，您可能会发现只需将一个类添加到 firstdt或dl+dt, dt+dt+dd用作选择器会更容易）

于 2013-03-12T23:08:05.650 回答