How to Display an Unordered List Horizontally

Although it seems like it should be simple many newcomers to XHTML / CSS get stuck on this. Here I show you a quick and easy way to turn an Unordered List ( the HTML <ul> tag ) into a horizontal menu.

First we need the HTML for the list:

<div id="menu">
	<ul>
		<li>First menu item</li>
		<li>Second menu item</li>
		<li>Third menu item</li>
	</ul>
</div>

This creates a list that looks like this:

In order to display the list horizontally we need to apply rules to the <ul> and <li> tags like this:

#menu ul{
list-style: none;
}

#menu li{
display: inline;
}

After applying the CSS the list now looks like this:

• First menu item
• Second menu item
• Third menu item

To space the individual items out simply change the CSS to this

#menu li{
display: inline;
padding: 8px;
}

And that's it! After doing this you will get a horizontal list that looks very similar to the main menu at the top of my website. This technique is especially useful for creating horizontal menus in Joomla templates.