WEBサイト作成時に発生するエラーやトラブル対応の備忘録を中心に、いろいろと書いております。


listでナビゲーションを作成時に余白が出るのを回避する。

<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;

にする方法もあるようですが、検証していません。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください