グラフィカルリンクを含むリストをインラインリストに変換するにはどうすればよいですか？

Question

このHTMLが与えられると、

<ul id="topnav"> 
    <li id="topnav_galleries"><a href="#">Galleries</a></li> 
    <li id="topnav_information"><a href="#">Information</a></li> 
</ul> 

そしてこのCSS：

#topnav_galleries a, #topnav_information a { 
    background-repeat: no-repeat; 
    text-indent: -9000px; 
    padding: 0; 
    margin: 0 0; 
    overflow: hidden; 
    height: 46px; 
    width: 136px; 
    display: block; 
} 
#topnav { list-style-type: none; } 
#topnav_galleries a { background-image: url('image1.jpg'); } 
#topnav_information a { background-image: url('image2.jpg'); } 

topnavリストをインラインリストにするにはどうすればいいですか？

Answer 1

このお試しください：

#topnav { 
    overflow:hidden; 
} 
#topnav li { 
    float:left; 
} 

とIEのために次を追加する必要があります。そうしないと、あなた浮かべ< LI>タグ

#topnav { 
    zoom:1; 
} 

は>含む< ULの外に波及するだろう。

Answer 2

。

Answer 3

左の要素を浮動する代わりに、このです：

#topnav li { 
    display: inline; 
} 

Answer 4

別のアプローチは、li秒間display: inline-blockを使用することであろう。

#topnav li { 
    display: inline-block; 
}