CSSのネタ~縦並びのメニュー

2011.08.27

CSSで縦並びのメニューを構築する場合、リスト要素<ul><li>とリンク要素<a>を組み合わせるのが一般的。

その時、WindowsIE5~6系ではリストの間に隙間が出来てしまう事がある。

その場合にリストの隙間を消すテクニックを2つ

<ul><li>HTMLの改行を無くす

<ul><li><a href=”#”>メニュー1</a></li><li><a href=”#”>メニュー2</a></li><li><a href=”#”>メニュー3</a></li></ul>

上記の様に該当するHTMLのソース上において<ul></ul>間の改行を使わないで記述する方法。

 

CSSでコントロール

li{ display:inline; height:auto; } 
a{ display:block; }

 

上記の様にli要素にdisplay:inlineをa要素にdisplay:blockを指定する。

 

さらにMac版IE5系用にheightプロパティを指定する。(a要素で高さ指定した場合、ココではautoを指定したが、高さ指定でもいい)