使用左浮动、左对齐项目水平居中列表

Question

我有一个包含多个“section”的“div”。其中一个“section”包含一个“ol”，它的所有“li”都向左浮动。我试图使“ol”缩小以包含尽可能多的“li”在一行上，并在保持“li”左对齐的同时水平居中“ol”。

这是我的代码：http://jsbin.com/ocokog/1/edit

<div id="wrapper">
 <section id="section">
  <ol id="list">
   <li id="i0"></li>
   <li id="i1"></li>
   <li id="i2"></li>
   <li id="i3"></li>
   <li id="i4"></li>
  </ol>
 </section>
</div>

非装饰性CSS：

#wrapper {
  width: 85%;
  text-align: center;
}

#section {
  display: inline-block;
}

#list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

#list > li {
  width: 100px;
  height: 100px;
  float: left;
}

当

都适合一行时，列表居中:

当

落在第二行时，

和

会增长并且整个东西都左对齐：

我正在尝试使它看起来像这样(取决于可用的宽度，也可以缩小section)：

设置宽度或最大宽度，并使用margin:auto也不太起作用：http://jsbin.com/ocokog/6/edit

为什么

不会收缩？我该如何解决这个问题？

---

这些问题类似但又不同：

• 在
  或其

  中居中浮动列表项<li>——在接受的答案中，所有的列表项都是居中的
  • 我可以用左对齐的
  • 居中一个
    吗？——每个项目都有自己的行

- Tom Smilack

Answer 1

ol被居中了。您将其设置为65%的宽度。如果您调整大小时查看橙色边框，它始终处于中心位置。

编辑

让我试着重新表述一下。 ol是一个块级元素，就像div一样。这意味着它填充了它所在的空间。这在您的示例中由橙色边框表示。您想要的是，ol占用少于100％的空间。有许多不同的方法可以实现这一点，但您始终从列表占用尽可能多的空间开始。

其中一种方法是设置宽度。问题在于您不希望宽度固定。因此，您尝试使用百分比设置宽度。这行不通，因为有许多间隔，百分比会导致li不居中。

另一种方法是设置ol的左右边距。这与设置宽度相同。

在一个你想要使用float:left;的元素中居中某些内容是不可能的。我认为混淆的原因是你认为可以让ol环绕li。问题是，ol并不是这样工作的。

- MiniRagnarok

---

抱歉，看起来我说错了，应该是70%。我直接访问了你提供的链接这里。 - MiniRagnarok

这是为了显示设置宽度是不起作用的，因为有额外的空间会使得物体偏离中心。与最后一张图片形成鲜明对比，该图片展示了我正在尝试做的事情。我是根据问题顶部的此链接进行工作的，但我会把这一点表述得更清楚。 - Tom Smilack

它确实可以工作。额外的空间是因为你正在使用百分比。如果你在浮点数中使用百分比，几乎总是会偏离中心。 - MiniRagnarok

例如，尝试使用width:330px;更改#list的百分比宽度。 - MiniRagnarok

我想找到一个通用的情况，在这种情况下它将使用可用的宽度，再次更新问题。 - Tom Smilack

仅使用 CSS，我认为这是不可能的。你可以尝试找出在不同间隔下需要的宽度，并使用 JavaScript 进行更改。 - MiniRagnarok