There are times when you do not want the markers to display in a list. Common examples are vertical or horizontal menus which normally would not display any markers. We will be creating menus shortly.
For now, let's explore how to remove markers from lists. This example demonstrates how to use the list-style property to remove markers from a list:
div#sideBar ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid green;
width: 140px;
}
... which results in this list with no markers. Because the margin and padding were set to 0 the list items are flush against the DIV container.
- one
- two
- three
Summary
Lists are used for menus for structural purposes. Markers are often not displayed for the menu items, and we can use the the list-style property to inhibit the display of markers if we desire.
It is a good idea to set the margins and padding of a list or its containing DIV to 0 as this allows us complete control when styling descendant elements.
Resources
-
Taming Lists
.
Mark Newhouse. A List Apart.