CSS: 2010年7月アーカイブ

[CSS] liタグでフロートさせると下にマージンが空いてしまう

久しぶりにCSSやったら初歩的な部分ではまった。

こんな感じでグローバルナビゲーションをマークアップすると思うのですが

<div id="globalNavi">
<ul>
<li>画像</li>
<li>画像</li>
<li>画像</li>
<li>画像</li>
</ul>
</div>
<div id="contentArea">
</div>

CSSで　liに対してfloatさせると

#site #globalNavi {
	border-top: solid 4px #000;
	clear: both;
}
#globalNavi ul{

}
#globalNavi li{
	float: left;
}

#globalNaviと#contentAreaの間にマージンが空いてしまう。

イロイロやってみた結果。
DOCTYPE宣言が原因だったみたいなので。とりあえずDOCTYPE宣言を

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

にして

#globalNavi ul{
	line-height:0;
}

CSSでulにたいしてline-height:0;を指定したらなおった。

2010年7月 4日 19:03 青 | 個別ページ | トラックバック(0)

このページには、2010年7月以降に書かれたブログ記事のうちCSSカテゴリに属しているものが含まれています。

前のアーカイブはCSS: 2008年7月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。