Own products

  • 新規事業のアイディア創造機

Tutorial

【CSS 中級講座】横並びにしたliタグで隙間が出来る問題のエレガントな対応策

この記事の読了時間:約356

  • このエントリーをはてなブックマークに追加

リストタグli タグ)に対してCSSで display:inline や display:inline-block を使って横並びにしようとすると、なぜか横に2~3ピクセル程度の意味不明な隙間が生じます。

初めて遭遇した時は、慌てて自分の書いたCSSを確認したり、仕方無しに float:left に書き換えたり、マイナスマージンで誤魔化したりしたって方も多いんじゃないでしょーか。

が、この問題の主たる原因はCSS側ではなく、HTML側の「改行」。

とはいえ「見栄え」の問題なので、HTMLをどーこーするのは気持ち悪い。

そんな時には今回ご紹介する対応策!CSSにほんの少々の手を加えるだけで、この謎の隙間から完全に開放されちゃいます!

さぁさぁ、寄ってらっしゃい見てらっしゃい♪

横並びにしたliタグで隙間が出来る問題の対応策

まずは現象を再現してみる

下記マークアップで現象は再現されます。まずはHTMLから。

<ul>
	<li>その1</li>
	<li>その2</li>
	<li>その3</li>
	<li>その4</li>
	<li>その5</li>
</ul>

んで、CSSは下記。分かりやすく li タグの背景に色を付けていますが、現象には影響ありません。

ul li {
	background-color:#eee;
	display:inline;
}

このようなマークアップだと、下記のサンプルページのように「謎の隙間」が発生してしまいます。

横並びにしたliタグ Before

上記サンプルページでは各ブラウザのデフォルトCSSをリセットするのに「CSS Reset - YUI Library」というのをCDNで使用していますが、まぁリセットしてもしなくても当該症状は発生します。

良く見る対応策

比較的よく見かける対応策としては、下記のように「改行部分にHTMLコメントアウトを付ける」というモノ。

<ul>
	<li>その1</li><!--
	--><li>その2</li><!--
	--><li>その3</li><!--
	--><li>その4</li><!--
	--><li>その5</li>
</ul>

うはーマンドクセ( ゚д゚)、ペッ

もしくは下記のように「改行を入れず一行で記述する」ってのもよく見かけます。

<ul>
	<li>その1</li><li>その2</li><li>その3</li><li>その4</li><li>その5</li>
</ul>

これもこれで1階層ならまだイイけど、多階層になったら見辛いコトこの上なし。

しかも両対策とも「見栄え」のハナシなのにHTMLの記述に余計な手間をかけなきゃなので、なんか筋違い感も拭えません。

エレガントな対応策

これからの決定版はコレ!HTMLは変わらないので、CSSだけを下記に。

ul {
	font-size:0;
}
ul li {
	font-size:16px;
	background-color:#eee;
	display:inline;
}

ポイントは「親の ul タグに font-size:0 を指定して、その子要素の li タグで改めてフォントサイズを設定する」ってトコ!

こーすると下記サンプルページのように、あの「謎の隙間」は綺麗サッパリ無くなっちゃいます☆

横並びにしたliタグ After

HTMLを汚すこと無く、複雑なCSS記述でもない、なんともエレガントな対応策。

是非一度ご賞味あれ♪

さて今週は「CSS中級講座 集中期間」と勝手に称して、毎日更新で頑張りますよ!

続く明日はマークアッパー必携知識「clearfix」について。

:after要素?IE用ハック?そげなモン使わんよ!!

  • このエントリーをはてなブックマークに追加

コメント一覧

2 Responses to [【CSS 中級講座】横並びにしたliタグで隙間が出来る問題のエレガントな対応策]

makebridge より:

2012/11/20 8:07 PM

ソースを汚さないエレガントな横並び感動しました!
ただ、IE6、7で確認したところ、まだ隙間がありましたので
なんとか消せないかなと思い試行錯誤していたら
liのCSSにzoom:1;を入れて、hasLayoutを有効にすると隙間がなくなりました。
うちの現場では、まだIE6、7の検証が必要だったので。。。
念の為コメントさせていただきました。
不要でしたら削除してください。
こちらの方法、今後活用させていただきます♪

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate