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

html css html-lists
Upcyclist picture Upcyclist · May 27, 2010 · Viewed 81.3k times · Source

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

Answer

BoltClock picture BoltClock · May 27, 2010 
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.

Related questions

How can I center <ul> <li> into div

How can I center an unordered list of <li> into a fixed-width div?

Read More
How to display an unordered list in two columns?

With the following HTML, what is the easiest method to display the list as two columns? <ul> <li>A</li> <li>B</li> <li>C</li> &…

Read More
HTML list-style-type dash

Is there a way to create a list-style in HTML with a dash (i.e. - or – &ndash; or — &mdash;) i.e. <ul> <li>abc</li> </ul> Outputting: - abc …

Read More