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

Question

Angesichts dieses HTML:

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

Und dieses 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 beim Drehen vorgehen? topnav Liste in eine Inline-Liste umwandeln?

Answer 1

Versuche dies:

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

Und für den IE müssen Sie Folgendes hinzufügen:

#topnav {
    zoom:1;
}

Andernfalls werden Ihre schwebenden < li >-Tags aus dem enthaltenden < ul > herauslaufen.

Answer 2

Ein anderer Ansatz wäre die Verwendung display: inline-block für li S:

#topnav li {
    display: inline-block;
}

Answer 3

Eine Alternative zum Schweben der Elemente nach links ist folgende:

#topnav li {
    display: inline;
}