リストの横並び時に生まれる< li >の隙間を解決する5つの方法

：2012年05月12日　カテゴリー

：HTML+CSS　

：コーディング　

：この記事は5分程で読めます。

ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。
結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的にはfloatで解決すれば良いと思いますが、floatを使うと都合が悪くなる場合などもあると思うので(width指定とか、センタリングとか)、そんなときのためにどうぞ。
個人的にメモしておいたものを、WEBにUPして管理しておきたいという意味もあり、今回記事にしています。

元となるソース

HTML

<ul>
  <li>バナナ</li>
  <li>リンゴ</li>
  <li>ミカン</li>
</ul>

CSS

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

ul li {
  display: inline-block;
  *display: inline;  
  *zoom: 1;
  padding: 5px;
  background: #000000;
  color: #ffffff;
}

プレビュー

バナナ
リンゴ
ミカン

このままだの状態だと上記のように、いらない隙間ができてしまいます。

HTMLをいじって解決

いくつか方法があるんですが、私がよく使う方法と、お勧めの方法をご紹介します。

改行しない

<ul>
  <li>バナナ</li><li>リンゴ</li><li>ミカン</li>
</ul>

プレビュー

バナナ
リンゴ
ミカン

一番簡単な方法です。特にリストの内容が少ないときはお勧めです。私は基本的にこれで解決しています。

スペースを無くす

<ul>
  <li>
  バナナ</li><li>
  リンゴ</li><li>
  ミカン</li>
</ul>

プレビュー

バナナ
リンゴ
ミカン

リスト内容が多いときはこの方法で解決すると良いと思います。

改行ごとにコメントアウト

<ul>
  <li>バナナ</li><!--
  --><li>リンゴ</li><!--
  --><li>ミカン</li>
</ul>

プレビュー

バナナ
リンゴ
ミカン

これもリスト内容が多いときに使うと良いと思います。

CSSをいじって解決

こちらもいくつか方法があるんですが、私がよく使う方法と、お勧めの方法をご紹介します。

table-cellを使う

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

ul li {
  display: table-cell;
  *display: inline;  
  *zoom: 1;
  padding: 5px;
  background: #000000;
  color: #ffffff;
}

プレビュー

バナナ
リンゴ
ミカン

display:table-cellでも横並びになります。inline-blockにこだわりが無ければ上記の方法で良いと思います。私はこれが一番のお気に入りです。

font-size:0を使う

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

ul li{
  display: inline-block;
  *display: inline;  
  *zoom: 1;
  padding: 5px;
  background: #000000;
  color: #ffffff;
  font-size:13px;
}