Fit width as in display:inline

Question

I would like to do responsive centered list of boxes.
So I used text-align:center, but the last line is centered too: http://jsfiddle.net/NWmpL/1/

I was trying to use additional wrapper which closely surrounds <li>,
but only way which I know to "closely surround" content is using display:inline
http://jsfiddle.net/NWmpL/2/ but here text-align:left dont working
And width:200px should be flexible (because in my case it is browser width)

Is there any other way to "closely surround" content? Or is there any other solution ?

Thanks in advance.

More clearly: http://jsfiddle.net/NWmpL/6/

I want change this to this

Answer 1

You should be using display:inline-block for layout, not display:inline.

display:inline is only intended for text content; if you have any block content inside the element and you want inline behaviour, you should always use inline-block instead.

So I went to your fiddle and changed the inline to inline-block.

Guess what.... that fixed the problem; it now looks the way you wanted.

See http://jsfiddle.net/NWmpL/8/

You could also consider using float:left to achieve this kind of layout, but since we've got a working answer with inline-block, I'll leave it at that.

Answer 2

Add

float:left;

to

.center li { }

FIDDLE

Answer 3

ul.center {
    display: table;
    margin: 0 auto;
    width:250px; }

ul.center li {
    display: block;
    float: left;
    width:75px; height:75px;    
    margin: 2px;
    list-style: none;
    background-color: #CCC; }

Answer 4

check the updated fiddle: http://jsfiddle.net/4t6ha/2/

Try this different approach:

CSS:

.holder
{
width:300px;
border:1px dotted #000;
float:left;
padding:5px 5px;
}

ul
{
list-style:none;
}

li
{
display:inline-block;
height:30px;
width:30px;
background:#dedede;
margin:2px;
float:left;
padding:10px;
margin-bottom:5px;
}