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