如何將圖形鏈接列表轉換爲內聯列表？

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瀏覽器，你將需要添加以下內容：

#topnav { 
    zoom:1; 
} 

否則你飄來< LI>標籤將灑出含< UL的>。

Answer 2

給列表項width（50%？）和荷蘭國際集團float他們left是比較常見的，因爲inline-block不支持非常好。

Answer 3

浮動左元素，另一種方法是這樣的：

#topnav li { 
    display: inline; 
} 

Answer 4

另一種方法是使用爲display: inline-blockli S：

#topnav li { 
    display: inline-block; 
}