リストタグでナビゲーションを作ったら隙間ができる

よくCSSを使ってナビゲーションを作る時、リストタグを使います。そこでたまにおきるのがナビゲーション間に隙間ができてしまう。決して意図したわけではないのに。。。そんな時の解決方法を紹介します。
実際現象を見てもらいましょう。下記のソースでWindows IEで見ると隙間ができています。Firefoxなら問題なしです。

CSS

 ul{
 margin: 0;
 padding: 0;
 list-style: none;
 }

li{
 margin: 0;
 padding: 0;
 }

li a{
 display: block;
 padding: 0.2em;
 text-decoration: none;
 color: #FFF;
 background-color: #F60;
 }

HTML

<ul>
<li><a href=””>ナビ01</a></li>
<li><a href=””>ナビ02</a></li>
<li><a href=””>ナビ03</a></li>
<li><a href=””>ナビ04</a></li>
<li><a href=””>ナビ05</a></li>
</ul>

 

結構隙間が空いていてとても目をつぶれるレベルの話ではないですよね。
これはいくつか解決方法があります。1つ目は</li>と<li>の間をなくす。つまり

HTML

<ul>
<li><a href=””>ナビ01</a></li><li><a href=””>ナビ02</a></li><li><a href=””>ナビ03</a></li><li><a href=””>ナビ04</a></li><li><a href=””>ナビ05</a></li>
</ul>

これで直るんですが、非常に見難くなります。そこでコメントアウトを入れてソースの見易さを保ちます。

HTML

<ul>
<li><a href=””>ナビ01</a></li><!–
–><li><a href=””>ナビ02</a></li><!–
–><li><a href=””>ナビ03</a></li><!–
–><li><a href=””>ナビ04</a></li><!–
–><li><a href=””>ナビ05</a></li>
</ul>

この他、CSSのみで対処できる方法もありますが、IE5.0では隙間が消えません。ですからIE5.0が対象ブラウザに入ってなければこれでもいいと思います。下記のどれか一つで大丈夫です。

CSS

/*幅を指定する*/
 li a{ width: 200px; }</pre>
<pre>/*windows独自拡張機能zoomプロパティで1倍拡大*/</pre>
<pre>li a{ zoom: 1; } 

要素の再指定(これだけ二つで1セットです) li a{ display: inline-block; } li a{ display: block; } [/css]
上記のどれを選択してもいいと思いますが、対象ブラウザの心配が要らないのはコメントアウトの指定かと思います。

またリストの中が画像の場合、考えられる解決方法はこちらです。

CSS