Display A HTML-List Horizontally

Normally a HTML-list is displayed vertically, which means that each entry is below the previous entry. But for some reasons you might want to display the list vertically, e.g. for a menubar.
Here is a simple way to do that.

For this example I’ll use the following list:

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

The result looks like this:

• Item 1
• Item 2
• Item 3

Now, we add some CSS:

<style>
li {
	display:inline;
}
</style>

With display:inline, we tell the list-items (<li>), which are block elements that they should behave like an inline-element. And so they are displayed horizontally.
We also remove the bullet points, add some space between them and add a border. By giving the list an id “demo”, I can limit this CSS-behaviour to this list.

<style>
#demo li {
	/* display inline */
	display:inline;
	/* remove list-symbols */
	list-style-type=none;
	/* set margin-right for each item */
	margin-right:15px;
	/* border */
	border:solid 1px #114477;
	/* set padding for each item */
	padding:5px;
	/* background-color for each item */
	background-color:#336699;
	/* text-color */
	color:#ffffff;
 
}
</style>

<ul id="demo">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

Now, the list looks like this:

• Item 1
• Item 2
• Item 3

So, have fun with HTML and CSS 🙂