Web Design in a Nutshell, 3rd Edition

Inline List Items

We’ll start with the minimum style rules for removing the bullets (list-style-type: none) and making the list items appear next to each other instead of in a list (display: inline). The margins and padding are set to 0 to prepare for anchor (a) element styling. The results of the styles thus far are shown in Figure 24-16.

    ul#nav {list-style-type: none;
        margin: 0px;
        padding: 0px; }
     
    ul#nav li {
        display: inline; }

Figure 24-16. Making a list display horizontally

With the pieces in place, you can then apply any style to the anchor (a) elements. In this example, the link underlines have been removed and a border, a background color, and padding have been added. An alternate style has been specified for the rollover state as demonstrated in the previous section. The resulting navigation list in Figure 24-17 is just one simple example of what can be done.

    ul#nav li a {
        padding:5px 20px;
        margin: 0px 2px;
        border: 1px solid #666;
        background-color: #CCC;
        text-decoration: none;
        text-align: center; }

    ul#nav li a:hover {
        background-color: #333;
        color: #FFF;

Figure 24-17. Adding styles to the inline list