over-ride behavior of <li> in CSS?

HTML5, CSS.

I have a bunch of items that are laid out as <li></li> in an <ul>

Rather than each be o开发者_Go百科n a separate line (yes, traditional behavior..) Is there a way to make them all line up next to each other?

so:

Adam
Eve
Tom
Jasmine

becomes:

Adam  Eve  Tom  Jasmine

This CSS will do it:

li {display: inline;}

You would obviously scope the CSS identifier to not apply to all li tags, but just your particular region. You can then use margin or padding on the li tags to control horizontal spacing.

You can see it in action here: http://jsfiddle.net/jfriend00/GJqy6/

A more complete example:

HTML:

<ul id="navbar">
    <li>Adam</li>
    <li>Eve</li>
    <li>Tom</li>
    <li>Jasmine</li>
</ul>

CSS:

#navbar li {display: inline; padding: 0 10px;}

Displays:

Adam   Eve   Tom   Jasmine

This structure is very commonly used for navigation bars at the top of web pages (inside the LI tags are <a> tags in that case.

Yes

 li { float: left; }

This is very commonly used in menu items.