How do I add separators between the items of a horizontal list?
Author: Deron Eriksson
Description: This CSS example shows how to add vertical separators between the items of a horizontally displayed list.
Tutorial created using: Windows XP


In another tutorial, we saw how an HTMLW list could be displayed horizontally by changing the "display" property for the list items to be "inline". One way to add separators between the list items is to use the "|" character in the text of the list items. Another method is to use CSSW borders, which we'll see here.

In the style-test.html file, we have a list that has a background-color of "aqua" via the "list" ID selector. The list items are displayed horizontally via the "horizontal" class selector via the "display" property set to "inline". Each element with a class of "horizontal" also has its left border set to 2 pixels. This will create a vertical separator line to the left of the text of each list item. In addition, padding is added between the text and this vertical line to the left of the text via the "padding-left" property, which is given a value of "0.3em".

The first list item also has a class of "first". We don't want any border to the left of the first list item, so I set the "border-left" property for "first" to be "none". In addition, I removed the left padding for the "first" list item via "padding-left" set to "0".

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
#list { background-color: aqua; }
.horizontal { display: inline; border-left: 2px solid; padding-left: 0.3em; }
.first { border-left: none; padding-left: 0; }
</style>
</head>
<body>
<ul id="list">
<li class="horizontal first">One</li>
<li class="horizontal">Two</li>
<li class="horizontal">Three</li>
</ul>
</body>
</html>

The display of style-test.html is shown here:

display of style-test.html