Displaying Lists Horizontally

The display property is the last property we will explore before we start styling lists as menus and navigation bars. The display property provides for classifications that define how elements are rendered. We are particularly interested in using the display property to specify whether an element is a block-level element or an inline element.

By default, lists and list items are classified as block-level and list-item elements, respectively.

A list-item element is essentially a block-level element with additional list item properties, such as markers.

A normal block-level list looks like this:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Which displays vertically as:

one
two
three

There may be times when you want to use the structure of a list but you desire the list items to be displayed as normal inline content, as if the items in the list were normal content in a sentence or paragraph.

The display property allows you to override the default classification for a LI tag, and redefine it as an inline element. Thus, the individual list items will display as inline content, one after another in a sentence or paragraph, instead of its normal block-level vertical-behavior ... as with a horizontal navigation bar at the top of a web page.

An Example of Inline Lists

This example displays what looks like a list within a paragraph. What is actually happening is that the paragraph(s) are set to inline and the list is set to inline. Even though the three elements are distinct and normally are separated by line breaks, they each display as if the three elements are one big paragraph.

This is the first paragraph. We will see the contents of the list look as though it is part of the paragraph.

One,
Two,
Three.

This is the second paragraph which follows the list, but the effect is like one large paragraph instead of three separate elements.

Here are the styles:

div#inlineExample {
  border: 1px solid green;
  }
  
div#inlineExample p {
  display: inline;
  }
  
div#inlineExample ul, div#inlineExample li {
  display: inline;
  margin: 0;
  padding: 0;
  color: red;
  }

And the markup:

<div id="inlineExample">
  
  <p>
    This is the first paragraph. We will see the contents of the 
    list look as though it is part of the paragraph. 
  </p>
    
  <ul>
    <li>One,</li>
    <li>Two,</li>
    <li>Three.</li>
  </ul>
    
  <p>
    This is the second paragraph which follows the list, 
    but the effect is like one large paragraph 
    instead of three separate elements.
  </p>
    
</div>

To make this work, the P element, the UL and the LI elements must all be set to inline.

We will take the information that we have covered thus far, and apply all these concepts to create vertical and horizontal menus. We'll start with the simpler of the two, vertical menus ...

Summary

To create horizontal menus, we can set our lists and/or list items to display as INLINE to override the default vertical listing of lists.

Resources

Taming Lists . Mark Newhouse. A List Apart.
CSS display property . W3C CSS 2.1 Spec.

List Properties for Menus