CODEWITHSUNDEEP
csshtml-lists
CookieMonster
CookieMonster

Reputation: 1237

CSS spread <li> horizontally across <ul>

I'm trying to spread a list of <li>'s aligned horizontally using float:left across my <ul>.

Does anyone have any idea how this is done?

Upvotes: 5

Views: 25499

Answers (5)

programmingmusic
programmingmusic

Reputation: 489

li {
    display: inline-block;
}

ul{
    text-align: center;
}

Then adjust the padding or margins of the li elements to spread them across less or more across the ul.

Upvotes: 1

CookieMonster
CookieMonster

Reputation: 1237

The answer is to use display: table; on the <ul> element and display: table-cell; on the <li> elements.

Upvotes: 7

aroth
aroth

Reputation: 54856

Is there some reason why you can't just set them to display: inline; (or inline-block)? For example:

http://jsfiddle.net/TKmR5/

Upvotes: 8

joar
joar

Reputation: 15947

You can use display: inline-block; it works in modern browsers.

Example: http://jsfiddle.net/joar/ELpDD/

As feela said in the comments to #7131346,

[…] "awkward space between items" is caused by not re-setting margins and paddings…

Upvotes: 2

Bazzz
Bazzz

Reputation: 26942

Float left and divide the width of the ul over de number of lis I think is what you are after. Have a look here: http://jsfiddle.net/b2nsW/

HTML:

<ul>
    <li>item</li>
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
</ul>

CSS:

ul {
    width: 250px;
    background: red;
    padding: 0;
    margin: 0;
    overflow: auto;
}

li {
    width: 20%;
    float: left;
    background: green;
    margin: 2.5%;
}

Upvotes: 1

Related Questions