“リストで作ったテキストメニューをCSSで比較的簡単に横並びにする方法。”という、夢実現のためのアファメーション。

強制的に横並びにしたいの。

サイトを作るときにフッターとかにテキストメニューを並べたいとき、こだわらないのであれば、pタグとかにメニュー項目を縦棒（|）で区切って並べれば簡単。

例：| ホーム | お知らせ | なんとか | かんとか |

でも、htmlのマークアップにこだわるならば、どうせだったらリスト（ul,li）で並べたいと思うのがウェブ屋の佐賀…じゃなくて性。

単に左揃えだったら、ulにborder-leftを設定し、liにborder-rightを設定し、liの左右のpaddingを適当に設定してdisplay:inline;か、float:left;すればいい。

んが、さらにそいつをセンターに揃えたいってなると、意外とめんどくさくてやってなかった。

で、結果としては…そんなに難しいもんじゃないみたい。
（食わず嫌いみたいなもんです。汗）

リスト（ul,li）で作ったテキストメニューを横並びにする方法。

とりあえず、

<div id="hoge">
<ul>
<li><a href="#">ホーム</a></li><!--
--><li><a href="#">お知らせ</a></li><!--
--><li><a href="#">なんとか</a></li><!--
--><li><a href="#">かんとか</a></li><!--
--></ul>
</div>

こんな感じのブロックを用意して、
（※liの前後のコメントタグは、IE6で改行コードによる余計なスペースが入るのを回避するため。）

CSSは、

ul,ol,li {
list-style: none;
}

#hoge {
width: 100%;
background: #00FFCC;
padding: 10px 0;
text-align: center;
}

#hoge a {
color: #FFFFFF;
}

#hoge ul {
border-left: 1px solid #FFFFFF;
display: inline;
}

#hoge li {
border-right: 1px solid #FFFFFF;
display: inline;
padding: 0 5px;
}

ってな感じにすればOK。とりあえずIE6、IE7、FFxでチェックしたけど大丈夫みたいです。

リスト（ul,li）で作ったテキストメニューを横並びにする方法。のサンプル

※サンプルは多少CSSを追加しています。

キモはulをdisplay:inlineで強制的にインライン要素にして、外枠の#hogeでtext-align:centerを使ってセンタリングするところなんですが、これってCSS的にアリなのかナシなのかは微妙っす。

とりあえず、ulでマークアップしたテキストメニューを、ソースを汚さずに簡単にセンタリングするひとつの方法として。

090507追記

某GOくんからの情報で、

上記のサンプルですと、
メニュー項目一つ一つの文字数が多かったり、項目数が多い場合など
すでに横幅ギリギリで収まってる場合、
Firefox2や文字スケールの制御JSなどを使って拡大表示すると、
文字の半端なところで改行されたりしてしまいますよ。

とのことなので、#hoge liの属性に

width: auto;
white-space: nowrap;

を追加すると、はみ出た場合li要素が次の行にブロックごと落ちてくれる…とのことです。

つまり、

#hoge li {
border-right: 1px solid #FFFFFF;
display: inline;
padding: 0 5px;
width: auto;
white-space: nowrap;
}

って感じ。

（※サンプル修正済み）

GOくん、情報ありがとねーん。

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！