inline lists with graphical links in css

Question

given this html:

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

and this 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'); }

how would I go about turning the topnav list into an inline list?

Answer 1

#topnav li { display: inline-block; }

Answer 2

Giving the list items a width (50%?) and floating them left is more common since inline-block isn't supported very well.

Answer 3

Try this:

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

And for IE you will need to add the following:

#topnav {
    zoom:1;
}

Otherwise your floated < li > tags will spill out of the containing < ul >.

Answer 4

An alternative to floating the elements left, is this:

#topnav li {
    display: inline;
}