Javascript HTML-CSS-wrap-li与ul

我试图将多个

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>

这是当只有一行，这是完美的

但从第二行开始，

ul

的宽度扩大，右侧出现间隙

演示

更新

---

如果CSS不能做到这一点，那么我如何用Jquery或Javascript实现呢？

正如我在评论中提到的，单用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');
});

---

这不能仅用CSS来完成。您不需要计算和设置

#content ul

元素的宽度。@GabyakaG.Petrioli您能给出一个示例吗？这非常有效，但当我单击链接到包含此代码的页面的链接时，它会再次在右侧显示间隙。我去掉了

$（窗口）。在（'resize'）…

上，将其余代码直接放入

$（文档）。ready（函数（）{…

但它仍然没有work@H.Kim您可以发布页面的实时版本吗？如果使用了

noConflict

，请尝试使用

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