带有ul

Question

我正在尝试在li中包含多个ul，并将它们水平居中于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的宽度消耗，右边的间隙出现。

样本

jsfiddle

更新

如果无法用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/