Wie konvertiere ich eine Liste mit grafischen Links in eine Inline-Liste?

Question

HTML Gegeben:

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

Und diese 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'); } 

Wie würde ich die topnav Liste in eine Inline-Liste gehen zu drehen?

Answer 1

Versuchen Sie folgendes:

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

Und für IE Sie die folgenden Funktionen hinzufügen müssen:

#topnav { 
    zoom:1; 
} 

Andernfalls wird Ihr schwebte < li> Tags werden> aus dem enthaltenden < ul verschütten.

Answer 2

geben die Listenelemente ein width (50%?) Und float ing sie left häufiger, da inline-block nicht sehr gut unterstützt wird.

Answer 3

Eine Alternative die linken Elemente zu schwimmen, ist dies:

#topnav li { 
    display: inline; 
} 

Answer 4

Ein anderer Ansatz wäre display: inline-block für li s zu verwenden:

#topnav li { 
    display: inline-block; 
}