[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;を指定したらなおった。
トラックバック(0)
このブログ記事を参照しているブログ一覧: [CSS] liタグでフロートさせると下にマージンが空いてしまう
このブログ記事に対するトラックバックURL: http://alwaysfinetuning.com/mt/mt-tb.cgi/146
