HTML CSS用ul包装li

Question

我正在尝试在ul包装多个li并将它们水平放置在div 。 当只有li的一行时，它起作用，但从第二行开始，右边出现间隙。

我该如何解决这个问题？

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;
}

这是只有一排且非常完美的时候。

但是从第二行开始， 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/