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?

Indult

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.

Ragg

Floated elements can still be block-level (in fact, they're ALWAYS treated as block-level) and so you can still apply box model properties like padding and margin to them. Inline elements ignore padding/margin, so float: left is usually the best solution. In fact, if you use BOTH, it will correct a bug in IE6 that causes floated elements to have double margins (though all browsers will still render them as block-level). – Joab

Answer 2

You could also do this, for some situations:

li {
    float: left;
}

Housekeeper

This would not work for odd number of elements – Totally

Answer 3

My favorite way to do it it's by using because it's allow do use width, height, margins and padding:

li { display: inline-block; }

But have some render problem in IE, to fix use (order is important):

li 
{ 
  display: inline-block; 
  zoom: 1;
  *display: inline;
}

Regale

Answer 4

One of the best resources on the subject is http://css.maxdesign.com.au/listamatic/ (a little outdated though).

They suggest both li {display: inline;} and li {float: left;} depending on the effect you want.

Look for example their "Simple horizontal list" http://css.maxdesign.com.au/listamatic/horizontal01.htm

Nesto

Answer 5

ul {
    float: right;  to <li> go to the Right or Left side
}

ul li {
    display: inline-block;
    padding: 10px;
    margin-top: 5px;
}

If you use the "float:" in the "li", the list will invert the sequency.

Hultgren

Answer 6

ul {display: inline;} 
ul li { list-style: none;display: inline;}

Kokura

+1.. I was wondering. Why didn't anyone mention the list-style: none. It is needed right? Or bullet points will appear horizontally. – Drugge

Answer 7

You could do:

li {
    float: left;
    display: inline;
}

If you want to maintain it's block characteristics but still need side-by-side, you could do:

li {
    float: left;
    display: inline-block;
}

Pericynthion

Doesn't floating an element automatically cause it to display: block? Or is it still overridable? – Ragg

@BoltClock: You could use either display:inline or float:left but using float saves you from display getting screwed up in IE<=7, however, this depends on your html markup, using both together is better in most cases. – Pericynthion

Ah, sounds like an IE issue after all. – Ragg

Just to add some clarification, it's actually the addition of display:inline that corrects the IE <= 6 bug. And yes Bolt, floating will cause an element to be treated as display: block. IE6 will do weird things with the margin if you don't in turn specify display: inline (confusing, because IE6 will STILL render it as block-level, just will not screw up the margins). – Joab

Answer 8

you will try this styling

li{
height:20px;
float:left;
list-style-type: none;
width:70px;
padding:3px;
border-right:1px solid #3687AF;
background-color: #015287;
background-repeat: no-repeat;
background-position: center 30px;
} 

it will work for u sure...

Verde

Answer 9

you can use float: left;

ul li {
    float: left;
}

Strawflower