Own products

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

Tutorial

2012
09/10

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

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

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

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

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

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

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

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

»続きを読む

Bookmarks

2012
09/09

2012年9/2~9/8の週間ブックマーク

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

jQuery プラグイン BigVideo.js – The jQuery Plugin for Big Background Video Carousel With Variable Elements Wi […]

»続きを読む

関連する記事

Bookmarks

2012
09/02

2012年8/26~9/1の週間ブックマーク

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

jQuery プラグイン Photofy | Photo Swap Shuffle Plugin for jQuery IT関連ニュース 1万社起業へ助成制度 経産省、数百万円を補助  :日本経済新聞 各種まとめエントリ […]

»続きを読む

関連する記事

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

Contact

お名前※必須

ご連絡先メールアドレス

お問い合わせ内容※必須

CAPTCHA

captcha

Blog parts

Affiliate