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/