display:inlineで横並びにしたメニュー

質問

のa:とa:hoverをbackground-imgでロールオーバーさせたいんですが、画像を大きく調整できません。line-heightとheightをいじってみましたが画像そのものの高さは変わりません。サイドメニューを作った時はDL,DT,DDでdisplay:blockでうまく出来ました。下記に現状のHTMLとCSSを記述しますのでよろしくおねがいします。

html側
<div id="banner_menu">
<ul>
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこ</a></li>
<li><a href="#">さしすせそ</a></li>
<li><a href="#">たちつてと</a></li>
<li><a href="#">なにぬねの</a></li>
<li><a href="#">はひふへほ</a></li>
</ul>
</div>
CSS側
#banner_menu {
clear: both;
margin: 0px;
padding: 7px 0 5px 15px;
border-top: solid 1px #999;
border-bottom: solid 1px #999;
width: auto;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
#banner_menu ul {
text-align: left;
padding-bottom: 1px;
margin: 0px;
}
#banner_menu li {
color: #ffffff;
display: inline;
padding-left: 7px;
padding-right: 5px;
border-left: solid 1px #999;
width: 120px;
}
#banner_menu a {
color: #4d4d4d;
font-weight: normal;
background-color: none;
text-decoration: none;
font-size: 12px;
background: url(var_gry120x48.gif) no-repeat center center;
line-height:20px;
height: 20px;
}
#banner_menu a:hover {
color: indianred;
font-weight: normal;
background: url(var_gry120x48_2.gif) no-repeat centert bottom;
}

回答No.1

DrFell · ベストアンサー

インライン要素とブロックレベル要素の違いを把握されていないようです。インライン要素は横にならぶ物ではなく、行の中に入るもので、幅や高さをもてません。marginも効きませんが、paddingなら効きます。
ブロック要素は前後に改行を含む矩形で、高さや幅をもてます。

今回liをインラインに変えられたので、liは高さも幅ももてません。その中の要素はaでやはりインライン要素です。同じく高さも幅ももてません。paddingならもてます。文字の長さにしたがって、aの幅が変わるのならpaddingで幅や高さを指定する手があります。

全menuに同じ幅と高さを指定したいなら、この場合、a要素をinline-block要素に見せかける方法があります。これは外向きにはinline内向きにはblockになる要素です。imgなどと同じように外に対しては改行されず、行内に含まれるが、中身は高さや幅を持てます。

知識として、出来上がりの見た目が同じタイプなら、liをdisplay:inlineにせず、float:leftにして、afterでclear:leftする方法がよく使われます。

お礼

ありがとうございました。とりあえずliをfloat:leftに変更して、a:をdisply:blockにして解決しました。シンプルな形にするのもだいじですねぇ。