How to get <ul> <li> list horizontal.

faund

I see a webpage get a list horizontal, and I looked it's css code, but did not find out how to do.

What I mean is <ul><li> list is vertical like this:

line 1
line 2
line 3

I want to it be:

line1 line2 line3

I want to use this horizontal list as the top menu of my site.

Azmo

always post your css when asking this kind of questions, helps alot if we can see how far you've come and what needs to be fixed.

However, something you can do is either

display: inline;

or simply set a width: ??px; (insert a value where the ?? are) in your ul, that should do it.. if it's wide and not very high, it should do the problem =)

Nicholai

ul li {float:left} is also an option.

Wink

InsanePL

try

ul {
list-style: none;
margin: 0;
padding:0
}
ul li {
display:inline
float: left;
padding: 0 10px;
}

and you`ll get nice list

mathiaus

No ; after display:inline and you don't need inline and float.

faund

Thanks!

I tryed

Aredon

ammonkc

float:left;
display:inline;

will do the trick. the best way to do horizontal menus

cavey

This site has examples on many way to style your lists:
Horizontal list: http://css.maxdesign.com.au/listamatic/horizontal01.htm
And many more: http://css.maxdesign.com.au/listamatic/