我如何渲染<li>并排？

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 li s 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;
}

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;
}

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

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.

Answer 6

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

Answer 7

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

Answer 8

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;
}

Answer 9

you can use float: left;

ul li {
    float: left;
}