# 縦棒で区切った要素を並べる

- リンク: https://torounit.com/blog/%e7%b8%a6%e6%a3%92%e3%81%a7%e5%8c%ba%e5%88%87%e3%81%a3%e3%81%9f%e8%a6%81%e7%b4%a0%e3%82%92%e4%b8%a6%e3%81%b9%e3%82%8b/
- 公開日: 2010-09-17T16:21:05+09:00
- 作成者: Toro\_Unit

フッターリンクなどで縦棒で区切ってリンクとかを羅列することって、結構あると思うん
です。

[[
 的な。 そんなときいちいちクラスを振ったりJSで数えたりしなくてもスマートにCSS
で表現する方法のメモ。ie7以上でー。

[html]
 <div class="footer"> <div class="links"> <a href="#">nav1</a><a href="#"
>nav2</a><a href="#">nav3</a><a href="#">nav4</a><br> <a href="#">nav5</a><a href
="#">nav6</a> </div> </div> [/html] [css] .footer .links { margin-bottom: 10px; 
padding-bottom: 10px; }

.footer .links a {
 display: inline-block; border-right: 1px solid #CCC; padding:
0 10px; margin: 5px 0; }

.footer .links a:first-child,
 .footer .links br + a { border-left: 1px solid #CCC;}[/
css]