How do I render side-by-side?

Question

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

Answer 1

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 2

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 3

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.

Answer 4

You could also do this, for some situations:

li {
    float: left;
}

Answer 5

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 6

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.