CODEWITHSUNDEEP
csshtml
JDog
JDog

Reputation: 21

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

Upvotes: 2

Views: 163

Answers (2)

jfriend00
jfriend00

Reputation: 707446

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.

Upvotes: 4

Joonas
Joonas

Reputation: 7303

Yes 

 li { float: left; }

This is very commonly used in menu items.

Upvotes: 2

Related Questions