Inline HTML Lists with CSS

By default our lists will display vertically, with each list item shown below the last. This is fine for most lists, because it is the way we naturally like to write lists. However, there is another way to display lists, with the list items shown next to one another. While this isn't very useful for normal lists, it is perfect for creating horizontal navigation bars.

To display HTML lists inline we need to add an extra property to our list item tags:

li {
	display: inline;

When we write our list now, the items will be displayed next to one another. We can easily make each list item a link to a particular page on our website and we've got ourselves a horizontal navigation bar! Don't forget we can use all the usual CSS properties such as borders, padding, and background colors, to style our horizontal list however we want.

Below is a quick mock-up of how we could create a horizontal navigation bar. The list items have been arranged inline, given a padding of 5px, a 1px black border, and an orange background color. The links here don't work but we could easily make them into proper links by adding the relevant code to each list item:

  • Home
  • Articles
  • Contact
  • Links