CSSでhover時に画像変更したい

質問

通常状態で画像の上半分を、マウスを画像上に持ってきたときにCSSで下半分を表示させています。

【CSS】
a:hover{
background-position: 0px 20px;
}

a{
background-position: 0px 0px;
height:20px;
width:100px;
display:block;
}
a.header_top{ background-image:url(./image/top.gif);}
a.header_link{ background-image:url(./image/link.gif);}

【HTML】
<a href="index.html" class="header_top" title="トップページへ"></a>
<a href="link.html" class="header_link" title="リンク"></a>

これだと縦にリンクを並べるのはいいのですが、横一列にしたい場合はどうすればいいでしょうか。
テキストのリンクだとdisplayをinlineにすればよいかと思うのですが、画像の場合、実体がないのでblockにしないときちんと表示されません。

よろしくお願いします。

回答No.1

maogong · ベストアンサー

floatを使用する方法はいかがでしょうか？a要素のスタイルシートを

a{
background-position: 0px 0px;
height:20px;
width:100px;
display:block;
/*** ここを追加 ***/
float : left;
}

にすればOKです。しかし、このままですとその後の要素も横に並んでしまいますので最後のa要素を

<a href="link.html" class="header_link" title="リンク" style="clear : left;"></a>

のように「style="clear : left;」を追加する必要があります。

お礼

御回答ありがとうございます。
そっくりそのままというわけにはいきませんでしたが、無事に思ったとおりの表示ができました。
本当に助かりました。