38

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

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Upcyclist
  • 381
  • 1
  • 3
  • 3

9 Answers9

50
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.

Anthony
  • 12,177
  • 9
  • 69
  • 105
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    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). – Daniel May 27 '10 at 07:23
19

You could also do this, for some situations:

li {
    float: left;
}
Anthony
  • 12,177
  • 9
  • 69
  • 105
12

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;
}
Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
Cesar
  • 4,418
  • 2
  • 31
  • 37
3

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

Eelvex
  • 8,975
  • 26
  • 42
2
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.

Rafael Rodrigues
  • 21
  • 1
1
ul {display: inline;} 
ul li { list-style: none;display: inline;}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
joe
  • 11
  • 3
  • +1.. I was wondering. Why didn't anyone mention the list-style: none. It is needed right? Or bullet points will appear horizontally. – Senthil May 29 '10 at 07:30
1

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;
}
Sarfraz
  • 377,238
  • 77
  • 533
  • 578
  • Doesn't floating an element automatically cause it to `display: block`? Or is it still overridable? – BoltClock May 27 '10 at 06:30
  • @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. – Sarfraz May 27 '10 at 06:33
  • Ah, sounds like an IE issue after all. – BoltClock May 27 '10 at 06:33
  • 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). – Daniel May 27 '10 at 07:26
1

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...

Subbu
  • 3,299
  • 5
  • 24
  • 36
0

you can use float: left;

ul li {
    float: left;
}
Nandeep Barochiya
  • 366
  • 3
  • 6