<ul>
<li><a href=”#”><img src=””></a></li>
<li><a href=”#”><img src=””></a></li>
<li><a href=”#”><img src=””></a></li>
</ul>
というソースで、画像を使ったナビゲーションを作る場合、<li></li>で予期しない余白が入る。
これの回避方法をメモしておきます。
ツꀀ横型
ul.navi {
ツꀀpadding: 0px;
ツꀀmargin: 0px;
}
ul.navi li {
ツꀀdisplay: inline;
ツꀀlist-style-type: none;
ツꀀfloat: left;
}
という風に、float:leftを入れます。
次の要素にclear:both;を入れることも忘れずに。
縦型
ul.navi {
ツꀀmargin: 0px;
ツꀀpadding: 0px;
}
ul.navi li {
ツꀀdisplay: block;
ツꀀlist-style-type: none;
ツꀀfont-size: 1px;
ツꀀline-height: 100%;
}
という風に、font-sizeを小さくし、line-height:100%にします。
line-height:0px;
にする方法もあるようですが、検証していません。
コメントを残す