Recipe 5.3. Place Dividers Between List Items

Problem

You want to create list dividers between list items.

Solution

Use the border property to create a visual divider.

li {  border-top: 1px solid black;  padding: .3em 0; }

Then apply a border to the bottom of the ul element to create the bottom border (see Figure 5-3):

ul {  margin-left: 40px;  padding-left: 0px;  border-bottom: 1px solid black;   list-style: none;  width: 36%; }

Figure 5-3. Dividers placed between list items

Discussion

To ensure consistency for the length of the dividers, apply only a value to the margin-left or padding-left property of the unordered list. Otherwise the length of the border on both the list items and the unordered list will be inconsistent. For example, if the list items are indented through the padding-left property, the bottom border is longer than the border for the individual list items (see Figure 5-4):

li {  border-top: 1px solid black;  padding: .3em 0; } ul {  margin-left: 0px;  padding-left: 40px;  border-bottom: 1px solid black;  list-style: none;  width: 36%; }  

Figure 5-4. The bottom divider is longer than the other dividers

See Also

Recipe 5.2 for creating cross-browser indents for lists.