THE HAM MEDIA BLOG

リストを横並びにした時の空白

リストをdisplay:inline;などで横並びにすると、リストとリストの間に空白ができちゃうんですよね。これを知らないと、paddingを0にしたりとかmarginを0にしたりとか、そういうのでがんばろうとしてしまうんだけど、実はそうじゃなくてHTMLの書き方によって(改行)空白できちゃうんですよね。

これをdisplayプロパティで横に並べる時、どの方法なら隙間なく並べられるか！他の方法とかを含めて検証してみましょう。

いろいろ検証してみる

ネタ元の方法が実際にどうなのか、そして、他の対処法も含めて検証してみます。

尚、今回の検証では、IE6、IE7、IE8、Firefox2、Firefox3.0、Opera9.6、Safari、Chromeで検証しました。

１、単純に改行した場合

■HTML

<ul>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ul>

■CSS

li{
	display:inline;
	margin:0;
	padding:0;
	background-color:#0000FF;
	color:#FFFFFF;
}

このCSSは３のサンプルまで共通

■プレビュー

IE6、IE7でみると、このサンプルだと隙間が無いようにも見えますが、隙間開いています。下の２、３と比べてください。

２、改行をしない

■HTML

<ul>
<li>サンプル</li><li>サンプル</li><li>サンプル</li><li>サンプル</li><li>サンプル</li>
</ul>

■プレビュー

この問題は改行が入ってしまっていることによって起きてしまうので、リストを改行しなければ隙間がなくなります。

３、改行ごとにコメントアウト(<!-- -->)を入れる

■HTML

<ul>
<li>サンプル</li><!--
--><li>サンプル</li><!--
--><li>サンプル</li><!--
--><li>サンプル</li><!--
--><li>サンプル</li>
</ul>

■プレビュー

２同様に改行を消すのですが、改行がないようにコメントアウトで改行部分をつなぐ方法です。これでも隙間がなくなります。

４、IE用にhasLayoutをtrueにした場合

HTMLは１と同じ。

■CSS

li{
	display:inline;
	margin:0;
	padding:0;
	background-color:#0000FF;
	color:#FFFFFF;
	*zoom:1;
}

■プレビュー

IE6、IE7はhasLayoutをtrueにするだけで隙間が消えます。他はもちろん、隙間消えません。

５、table-cellを使った場合

これが今回ネタ元で紹介されていた方法。

これもHTMLは１と同じ。

■CSS

li{
	display:table-cell;
    *display:inline;
    *zoom:1;
	margin:0;
	padding:0;
	background-color:#0000FF;
	color:#FFFFFF;
}

■プレビュー

なるほど、こういう方法もありですね。今回検証した全ブラウザで隙間がなくなりました！おお、table-cellも横並びになるんですねー。

６、ulにdisplay:table;を使った場合

続いてこれもネタ元に書いてたCSS。ulにdisplay:table;を入れる。

これもHTMLは１と同じ。

■CSS

ul {
    display:table;
}

li{
	display:inline-block;
    *display:inline;
    *zoom:1;
	margin:0;
	padding:0;
	background-color:#0000FF;
	color:#FFFFFF;
}

■プレビュー

ネタ元でも言っている通り、Operaはアウトでした。隙間とかのレベルじゃなくて、ブロック要素になってしまって通常のリストと同じように、縦に並んじゃいました。Firefox2でも縦に並んでしまい、アウトです。Firefox2だとinline-blockがきかないだけですね。Operaだと、table内でinline-blockが無効化されるために横並びにならないのかもしれないですね。

それと、IE8でもダメです。IE8は上二つと違って隙間ができるだけ。結局これでは使えないですね。

７、おまけ floatを使った場合

最後にリストをfloatさせた場合。

これもHTMLは１と同じ。

■CSS

ul{
	overflow:hidden;
	height:1%;
}
li{
	float:left;
	margin:0;
	padding:0;
	background-color:#0000FF;
	color:#FFFFFF;
}

■プレビュー

７も、今回検証したブラウザは全部クリアして隙間がなくなりました。

どれを使うのが正解ってのはないと思いますが、どういう方法で対応できるのか、というのは知っておいたほうがいいですね。ハック使いたくないなんて人は２とか３を使うのがいいでしょう。floatが嫌だし、HTMLもみやすくシンプルにしたいなんて場合は今回のネタ元紹介の５とかなんでしょうね。個人的には…HTMLのほうで修正の２か３が楽かなーなんて思う（笑）

他にも方法はきっとあるのでしょうけど、その検証は今度にしようかな。。。どなたかチャンレンジする人がいたら、ぜひチャンジ！でも、displayのプロパティだけでは限界ありますね。