このサイトはJavaScriptがオンになっていないと正常に表示されません

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

アーカイブ:2012年05月12日  カテゴリーHTML+CSS  タグ  タグ:この記事は5分程で読めます。

リストの横並び時に生まれる<li>の隙間を解決する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;
}

プレビュー

  • バナナ
  • リンゴ
  • ミカン

font-size:0;にすると、幅も0になるのでスペースも消えます。

どれを使って解決させるかに、正しい方法・誤った方法は基本的に無いと思いますが、解決する方法がいくつもあるということは頭に入れておいたほうが良いと思います。もちろん今回紹介したもの以外にも沢山解決方法はあります。他の便利な解決方法を知っている方がいればぜひ教えていただきたいです。

※【HTMLをいじって解決】に記載しているすべてのプレビューは、WPのHTML自動整形機能がONになっている関係で、実際にはCSSを使用して解決させています。ですがここで紹介しているように、通常はHTMLだけ修正して解決させることができます。


関連記事
この記事へのコメント
現在、この記事へのコメントはありません。
コメントをどうぞ

名前:(必須)

メールアドレス: (公開されません) (必須)

コメント本文:

この記事へのトラックバックとピンバック
現在、この記事へのトラックバックはありません。
トラックバックURL