リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

  • あとで読みたい人は…

@cappeeです。コーディングの復習をしていたら朝になってしまいました。

liタグを使用したリストやdlを使用したお知らせ一覧など、一覧の上下にボーダーを引きたい場合のCSSの書き方をメモします。

普通にliタグやdt、ddタグに上下のボーダーを指定すると重なったところが太くなってしまいます。

border2 リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

今回はdlタグを使って上下ボーダーをCSSで指定したいと思います。

[2013.3.6追加]
こちら以外にも縦のリスト表示や横並びでボーダーを引きたい場合のCSSについてたくさん下記でご紹介していますのでぜひご覧ください。
CSSだけでリストや横並びの区切り線を実現するパターン4つ

上下にボーダーを引きたい場合のCSS

HTML

<dl class="info clearfix">
 <dt>2012.4.21 13:54</dt>
 <dd>お知らせですよ。</dd>
 <dt>2012.4.21 13:54</dt>
 <dd>お知らせですよ。</dd>
 </dl>

CSS

.list {
overflow: hidden;
}
.list dt {
width: 110px;
float: left;
padding: 10px 5px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
margin-top: -1px;
}
.list dd {
width: 580px;
float: left;
padding: 10px 5px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
margin-top: -1px;
}
.clearfix {
zoom:1;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}

margin-top: -1px;を指定すれば下記のように1pxのきれいなボーダーにすることができます。

border リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

Pocket
article clipper リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>