1

とのグループを持つ<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/

（IE8以前では利用できないことに注意してください。回避するためのハックがありますが、IE8のサポートが必要な場合は、最初のクラスにクラスを追加するか、セレクターとして使用するfirst-of-type方が簡単な場合があります）dtdl+dt, dt+dt+dd

于 2013-03-12T23:08:05.650 に答える