Question

我有一个<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>

Answer 1

您需要在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支持，您可能会发现只需将类添加到第一个{{} 1}}，或使用dt作为选择器）

CSS：第一选择器

1 个答案: