Blog Top

スポンサーサイト

  • このエントリーをはてなブックマークに追加
  • Yahoo!ブックマークに登録
  • Googleブックマークに追加
  • Buzzurlにブックマーク
  • この記事をクリップ!
  • イザ!ブックマーク
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

display:inlineでリストを横並びにすると隙間が出来る

  • このエントリーをはてなブックマークに追加
  • Yahoo!ブックマークに登録
  • Googleブックマークに追加
  • Buzzurlにブックマーク
  • この記事をクリップ!
  • イザ!ブックマーク

display:inlineでリストを横並びにすると、何故かFirefoxやChromeなどのブラウザでliとliの間に隙間が出来る。

隙間ができるコード


ul li {
	display:inline;
	background:#ccc;
}

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

隙間をなくすには、コードを一列で書くか、liとliの間をコメント化する。

コードを一列で書く


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

liとliの間をコメント化


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

このどちらかの記述方法で、liとliとの間に隙間が出来なくなる。

関連記事

トラックバック

http://blogmemoblog.blog.fc2.com/tb.php/12-d925705c

コメントの投稿

管理者にだけ表示を許可する

検索フォーム


RSSリンクの表示

QRコード

QR

問い合わせ

当ブログ管理人への問い合わせはこちらのフォームからお願いします。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。