HTML CSS利用ul包装

Question

我想包装多个li在ul和水平中心他们在div。它仅在li s只有一行时有效，但从第二行开始，差距出现在右侧。

我该如何解决这个问题？

HTML

<div id="wrapper"> 

<div id="box"> 
    something 
</div> 

    <div id="content"> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    </div> 

</div> 

CSS

body { 
    text-align: center; 
} 
ul { 
    list-style: none; 
} 

#wrapper{ 
    width: 300px; 
    min-height: 300px; 
    border: 1px solid black; 
} 

#box { 
    width: 100%; 
    height: 30px; 
    background-color: grey; 
} 

#content { 
    display: inline-block; 
} 

#content ul { 
    border: 1px solid blue; 
    padding-left: 10px; 
    padding-top: 10px; 
    display: inline-block; 
} 

#content li { 
    width: 50px; 
    height: 50px; 
    float: left; 
    border: 1px solid red; 
    margin: 0px 10px 10px 0px; 
} 

这是当只有1行，它是完美的。

但是从第二行中，将出现的ul消费的宽度和在右侧的间隙。

DEMO

jsfiddle

UPDATE

如果这不能用CSS来完成，我怎么用jQuery或JavaScript实现的呢？

Answer 1

正如我在评论中提到的那样，单独使用CSS是不可能的。

这里是一个jQuery实现计算的许多项目如何适应和手动

$(function(){ 
    var wrapper = $('#wrapper'), 
     content = $('#content ul'), 
     extras = content.outerWidth() - content.width(); 

    $(window).on('resize', function(){ 
     var wrapperWidth = wrapper.width(), 
      children = content.children(), 
      itemWidth = children.outerWidth(true), 
      fit = Math.floor((wrapperWidth-extras)/itemWidth); 

     content.width(Math.min(fit,children.length) * itemWidth); 

    }).trigger('resize'); 
}); 

https://jsfiddle.net/zv038tgr/7/