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
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.