横並びにしたリスト項目の区切り

こんなふうに、横並びにしたリスト項目の間に区切りを表示させたいときにどうするか? すべての項目に区切りを表示させてしまうと区切りがひとつ多くなってしまうので、なんらかの工夫が必要になってくるわけです。

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/archives/">Archives</a></li>
  <li><a href="/portfolio/">Portfolio</a></li>
  <li><a href="/about/">About</a></li>
</ul>

上記のようなマークアップを例に、CSS でリスト項目を float: left; または display: inline; で横に並べ、各項目の左側にボーダーまたは背景画像で区切りを配置する場合を考えてみます。

おそらくもっともスマートなのは、いったんすべての項目に区切りを指定し、:first-child 疑似クラスを使って先頭の項目だけ指定を上書き、というやり方。しかし :first-child 疑似クラスは IE6 で使えないので、:first-child に相当するクラスを手動で、または jQuery などを利用して自動で付与する、というのがありそうなアプローチです。

それでももちろんいいんですが、各項目の左マージンに区切りの幅と同じ大きさのマイナス値を指定し、親要素の overflow プロパティに hidden を指定することでも実現できます。

ul {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  list-style: none;
}
ul li {
  float: left;
  padding: 0 0 0 4px;
  margin: 0 5px 0 -1px;
  border-left: 1px solid #808080;
}

もしリスト全体を右揃えにするなら、ul に幅を指定せず float: right; でいけます。

難点は中央揃えが難しいこと。ul を二重の div でくるんだりすればおそらくなんとかなると思いますが、そこまでいくとちょっとね。