Search
Close this search box.
Search
Close this search box.

CSS Lists

The menus of links that appear on nearly every site should really be marked up as lists, since that is what they are. Since we usually don’t want the default list style to apply to these links, we can use CSS to change the way they appear on the page.

Remove the bullets

ul
{
   list-style-type: none;
}

Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

ul
{
  margin: 0;
  padding: 0;
}

Horizontal lists

ul li
{
  float: left;
}

Learning Resources