How do I render side-by-side?

问题:

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

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

回答2:

You could also do this, for some situations:

li {
    float: left;
}

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

回答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

回答5:

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

回答6:

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

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