2012-10-17

[CSS] 2列横並びのリストの下にborderで線を入れる

ブログの記事一覧などで、記事を2列の横並びにしつつ、
下線で区切りを入れるケースというのは結構あるかと思います。

で、普通にliにborderを入れてしまうと、
記事数が奇数だったときに最後に半分だけ下線が入って不格好。
liの最後だけ非表示にするとしたら、記事数が偶数の場合にうまくいかない、と
予想以上に面倒だったりします。


そこで採用するのがliタグにネガティブマージンを入れること。
liタグにまず下線をborder-bottomで入れて、さらにmargin-bottom:-1px;を指定します。
そして、ulにoverflow:hidden;を入れて、最後の行のliタグ分が消せます。
こうすれば最後の行の記事が1つでも2つでも対応できますね!
最後にも線を入れたい場合はulのborder-bottom指定でOKです。


参考サイト
http://www.coolwebwindow.com/csstips/csstechnic/000258.php

Comment:

Trackback URL: