THE HAM MEDIA BLOG

リストを横並びにした時の空白をなくす方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
display
INLINE

リストをdisplayで並べると隙間開いちゃう・・・

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

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

いろいろ検証してみる

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

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

1、単純に改行した場合

■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は3のサンプルまで共通

■プレビュー

  • サンプル
  • サンプル
  • サンプル
  • サンプル
  • サンプル

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

2、改行をしない

■HTML

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

■プレビュー

  • サンプル
  • サンプル
  • サンプル
  • サンプル
  • サンプル

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

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

■HTML

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

■プレビュー

  • サンプル
  • サンプル
  • サンプル
  • サンプル
  • サンプル

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

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

HTMLは1と同じ。

■CSS

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

■プレビュー

  • サンプル
  • サンプル
  • サンプル
  • サンプル
  • サンプル

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

5、table-cellを使った場合

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

これもHTMLは1と同じ。

■CSS

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

■プレビュー

  • サンプル
  • サンプル
  • サンプル
  • サンプル
  • サンプル

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

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

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

これもHTMLは1と同じ。

■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は上二つと違って隙間ができるだけ。結局これでは使えないですね。

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

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

これもHTMLは1と同じ。

■CSS

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

■プレビュー

  • サンプル
  • サンプル
  • サンプル
  • サンプル
  • サンプル

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

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

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

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/117579108
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

これは盲点、リストを横並びにした時の空白をなくす方法
Excerpt: THE HAM MEDIAさんから。 リストを横並びにした時の空白をなくす方法 http://h2ham.seesaa.net/article/117579108.html ソースをきれいに見せる..
Weblog: ネットラピュタBLOG 〜ラピュタは本当にあったんだ!〜
Tracked: 2010-08-04 10:20

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。