Horizontal List Demo 2

22 June 2005

This demo shows how to style an HTML list to appear horizontally, complete with a hover colour on each list item. It's based on the demos at Listamatic which I have improved to allow for current browsers. See also my original demo.

Item one
Item two
Item three
Item four
Item five

Notes

Unlike the first demo, the HTML for the list doesn't need to be joined without linebreaks.
IE6 can drop the last list item down to the next line depending on the browser width.
Firefox 1.04 shows occasional rounding errors when the browser window is reduced, leading to a gap between one of the list items. A solution is to give the container div the same background as the list items, but sadly I couldn't get the height to match in IE6. (The height seems fixed?)

Browser Support

Tested and known to work in the following browsers on Windows XP SP2:

Opera 8.02
Firefox 1.0.5
Internet Explorer 6

Last updated: 5 October 2016 · A Design Detector production