<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で表示させなくします。