将水平列表显示为块

Question

I have a horizontal unordered list I want to center horizontally in a div container (that's arbitrarily bigger than the list). I was thinking of displaying the ul as a block and using auto margins to center the list within its parent container. But... I can't seem to get the ul to display as a block and not take 100% width.

From what I understand, block elements take the required width to wrap around children elements (unless they're uncleared floats or absolute positionned), so I would think that placing the ul and li's as blocks should do the trick. Unfortunately it doesn't and I don't understand why.

Any idea?

Here's the code: http://jsfiddle.net/kccbg/1/

Answer 1

Try using display: inline-block instead, and setting text-align: center for the container like so:

HTML:

<div class="container">
    <ul>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
    </ul>
</div>​

CSS:

.container{
    width:100%;
    background-color:#CCC;
    height:20px;
    text-align: center;
}
ul{
    display:inline-block;
    margin:0 auto;
}
li{
    display:inline-block;
}

Example

Answer 2

UPDATE: (based on comment from gmeben)

Change the css to:

.container{width:100%; background-color:#CCC; text-align:center}
li{display:inline;}

and remove

<li class="clear"></li>

from html.

No floats and clearing and no inline-block (not supported/rendered-correctly by all browsers).

Answer 3

If you know the total width of your list items, you can set the width of the <ul> and then set its margin to 0 auto. jsFiddle example .

CSS

.container{
    width:100%; 
    background-color:#CCC; 
    height:20px;
}
ul{
    list-style:none;
    width:200px;
    margin:0 auto;
}
li{
    float:left; 
}

​