floatで二列に並べたリストのいちばん下(上)の罫線を消す

<div>
<dl>
<dt>text</dt><dd>text</dd>
<dt>text</dt><dd>text</dd>
<dt>text</dt><dd>text</dd>
<dt>text</dt><dd>text</dd>
</dl>
</div>
div {
    height: auto;
    overflow: hidden;
}
dl {
    margin-top: -1px;
}
dl:after {
    clear: both; /* ここからclearfix処置 */
    content: ".";
    display: block;
    height: 0;
    visibility: hidden; /* ここまでclearfix処置 */
}
dt {
    float: left;
    width: 100px;
    border-top: 1px solid #eee;
}
dd {
    margin-left: 100px;
    border-top: 1px solid #eee;
}

ちょっと解説:
floatの都合、border-bottomにすると内容によって線がズレるので、borderはtopにします。
なので、リストのいちばん下に線が必要なときはdlに指定します。
いちばん上の線が不要なときは、dlで上マージンを線の太さぶんマイナスで上げ、dlを囲むdivにoverflow:hiddenで表示させなくします。

コメントする

CAPTCHA