Update April 2013: This article is pretty old. This isnt very hard. Just give the list centered text [e.g. ul.nav { text-align: center; }] and the list items inline-block [e.g. ul.nav li { display: inline-block; }]. If you want to do it with margin for whatever reason, look into width: fit-content;.
The current standard in coding menus is unordered lists. Its not as semantic as a tag would be, but its not that bad. Navigation is, after all, a list of sorts.
If you want to make this navigational unordered list horizontal, you have basically two options:
- Make the list items inline instead of the default block. .li { display: inline; } This will not force breaks after the list items and they will line up horizontally as far as they are able.
- Float the list items. Since we very often want our list items to display as blocks so we are able to set fixed widths on them, we are forced to float them to the left or right to line them up horizontally.