How can I line block elements up in a row?

Question

I have several block a elements that I want to be side-by-side to create a menu. The width of each is set to auto to accommodate the text inside. Each a element is displayed as a table cell and can work with either absolute or relative positioning.

Thanks for any help. Mike

Answer 1

If you float block elements, they'll be placed in a horizontal row (with dynamic widths unless you specify a fixed one.)

ul#navigation li {
    float: left;
}

Have a look at the HTML for the navigation on this page, for example (Questions, Tags, Users, ...)

Answer 2

display:inline-block

Answer 3

This is an almost similar scenario which you can consider using for creating a menu.

Answer 4

I would have gone with display:inline-block for generic side-by-side display but you're trying to do a horizontal nav. I wouldn't use the table cell display as it's quirky and you'll end up having to clean up other bugs.

html:
<ul id="navigation">
<li ><a href="/some-link.html">Some link</a></li>
<li ><a href="/some-link2.html">Some link 2</a></li>
<li ><a href="/some-link3.html">Some link three</a></li>
</ul>

css:
#navigation{
width:550px;
margin:0;
padding:0;
list-style-type:none;
overflow:hidden;
}
#navigation li{
float:left;
}

#navigation li a,#navigation li a:hover{
display:block;
padding:4px 21px 4px 20px;
text-decoration:none;
}

Answer 5

As mentioned above inline blocks are the way to go. This mozilla article will be useful to get it working in all browsers.

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/