リスト(liタグ）で作ったメニューを横並びにする

liタグでメニューを横並びにする方法は主に２つあります。

１．floatプロパティを使う

横並びをするには、floatプロパティを用いる方法が一般的です。ただし、いろいろと問題があります。

まず、リストタグの次にコンテンツがある場合、そのコンテンツはリストの横に回りこまれてしまうので、回り込みを解除しなければなりません。

また、floatプロパティを使うと親要素（ここではulタグ）の内容が0になってしまい、例えば、ulタグに背景やborderを適用しようとしてもうまく表示できない場合があります。この解決方法として、｢clearfix｣というコードの書き方があります。

あと、注意しなければならないのが、リストマークです。この方法ではIEではリストマークが消えているように見えるのですが、Firefoxなどの他のブラウザではきちんとリストマークが見えてしまっています。リストマークを表示したくない場合は｢list-style:none;｣を指定しましょう。

以上をふまえてコードは以下のようになります。

(X)HTMLコード

<ul class="menu">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>

CSSコード

ul.menu {
   margin:0;
   padding:0;
}

ul.menu li {
   float:left;
   list-style:none;
}

/* モダンブラウザ（Firefox Opera Safari）対策 */
ul.menu:after{
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   font-size:0;
}

/* Win版IE7とMac版IE5対策 */
ul.menu{
   display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html ul.menu{
   height:1px;
}

ul.menu{
   display:block;
}
/* End hide from IE-mac */

２．inline要素を使う

本来のリストが縦並びになるのは、ブラウザのデフォルトCSSにより、liタグのdisplayプロパティが｢block要素｣になっているためです。よって、displayプロパティを｢inline要素｣にすれば横並びになります。

しかし、注意しなければならないことがあります。

ブラウザによっては、なぜかulタグの上下やliタグの間に謎の隙間が空いてしまう場合があります。これはコードの書き方によるのですが、改行を半角スペースに変換してしまうようです。

この解決方法としては、コードを1行で書いてしまうか、改行の際に｢<!--(改行)-->｣というふうに書くかの2つがあります。

以上をふまえて、ソースコードは以下のようになります。

(X)HTMLコード

<ul class="menu"><!--
--><li><a href="#">MENU1</a></li><!--
--><li><a href="#">MENU2</a></li><!--
--><li><a href="#">MENU3</a></li><!--
--><li><a href="#">MENU4</a></li><!--
--><li><a href="#">MENU5</a></li><!--
--></ul>

CSSコード

ul.menu {
   margin:0;
   padding:0;
}

ul.menu li {
   display: inline;
}