nakayama 14:28 PM
横並びのリンクメニューを作成するときに | （区切り）を表現する方法はいくつかあると思いますが、 今回はシンプルなソースで実現する方法を、紹介したいと思います。
HTML
HTML は <ul> <li> のみでシンプルに。
<ul>
<li><a href="http://c-brains.jp/blog/wsg/">ホーム</a></li>
<li><a href="http://c-brains.jp/blog/wsg/about.html">はじめての方へ</a></li>
<li><a href="http://c-brains.jp/blog/wsg/contact.html">お問い合わせ</a></li>
<li><a href="http://feeds.feedburner.jp/bashalog">RSS Feed</a> </li>
</ul>
CSS
<ul> に width（全体の幅） と overflow: hidden; を指定します。<li> の方にはネガティブマージン指定を使って左端の | （区切り）がはみ出し、表示されなくなるように指定します。
* {
margin: 0;
padding: 0;
}
ul {
width: 425px;
overflow: hidden;
}
ul li {
display: inline;
margin-left: -1px;
padding: 0 7px 0 11px;
border-left: 1px #336699 solid;
list-style-type: none;
zoom: 1;
}
この方法なら、<li> に class や id を使わなくても実現できるので、HTMLがシンプルに保つことが可能です。
※追記しました
IE7 の zoom 機能で、拡大縮小すると崩れるとご指摘を頂き、今回追記いたしました。場所は CSS の <li> で、 「zoom:1;」を追加しました。これで拡大縮小しても崩れなくります。
ご指摘ありがとうございました。
