How do I render <li> side-by-side?

Question

I'm looking to create a navigation menu with list items rendered in one line. How do I do this?

Answer 1

li {     display: inline; } 

EDIT: I now realize why I felt strange answering with display: inline: because I usually use float: left myself instead, which is anthony-arnold's answer (so to him goes my upvote!).

Anyway, while either method will cause your lis to display in one line, inline elements and floated elements do behave differently. Depending on how you've styled your layout, you may have to choose one or the other.

Answer 2

You could also do this, for some situations:

 li {     float: left; }