display: inline
Method of Horizontal Menu Styling (left-aligned)
This method uses the display: inline
declaration on the list item element so that they will all display side-by-side in a horizontal menu. The advantages to this method are that you will not have any collapsing containers, float drop, or float clears to deal with, and you can use the text-align: center
declaration in the unordered list to center your menu in the banner. We'll center the next menu (Inline Alt), and leave this one aligned to the left, although you could certainly align to the right if desired.
The disadvantage is that inline display boxes can't be given set heights or widths, so image replacement doesn't work for them (image replacement is a lesson for next week). Also, padding and border will not make the anchor tag taller in the layout, so it is not useful for anything that you want to look like a "button." This method is good for minimal designs that want to keep layout streamlined.