Inline lists for navigation

Although most people think of lists as being vertically aligned, you can also display list
items inline. This is particularly useful when creating navigation bars, as you’ll see in
Chapter 5. To set a list to display inline, you simply add display: inline; to the li
selector. Adding list-style-type: none; to the ul selector ensures that the list sits
snug to the left of its container (omitting this tends to indent the list items). Adding a
margin-right value to li also ensures that the list items don’t sit right next to each other.
Here’s an example:
ul {
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}