html - 水平居中带有左浮动、左对齐元素的列表

Question

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

这是我的: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;
}

当 li 可以全部放在一行时，列表居中:

当 li 落到第二行时，section 和 ol 变大，整个内容左对齐:

我试图让它看起来像这样(取决于可用宽度，部分 也可以在必要时缩小):

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

为什么 ol 不会缩小？我该如何解决这个问题？

---

这些问题相似但不同:

• Centering floating list items <li> inside a div or their <ul> - 在接受的答案中，所有列表项都居中
• Can I center a <ul> with left-aligned <li>s? - 每个元素都有自己的行

Answer 1

ol 居中。您已将其设置为 65% 宽度。如果您在调整大小时查看橙色边框，则它始终居中。

编辑

让我试着改写一下。ol 是 block 元素，与 div 是 block 元素的方式相同。这意味着它填满了它所在的空间。这在您的示例中由橙色边框表示。您想要的是 ol 占用的空间少于 100%。有许多不同的方法，但您总是从列表开始，尽可能多地占用空间。

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

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

只是没有办法将您还想 float:left; 的元素居中。我认为混淆是因为您认为可以使 ol 环绕 li。问题是，这不是 ol 的工作方式。