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

Question

我的div包含多个section个。其中一个section包含ol，其所有li都向左浮动。我正在努力使ol缩小以尽可能多地包含li个{1}}，并使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 s全部适合一行时，列表居中：

当li s落到第二行时，section和ol会增长，整个事情会左对齐：

我试图让它看起来像这样（取决于可用的宽度，section可以在必要时收缩）：

设置宽度或最大宽度并使用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是一个块元素，与div是块元素的方式相同。这意味着它填满了它所在的空间。这在您的示例中由橙色边框表示。你想要的是，ol占用的空间不到100％。有许多不同的方法，但你总是从列表中占用尽可能多的空间。

其中一种方法是设置宽度。这个问题是你不想要一个固定的宽度。所以你尝试使用百分比来设置宽度。这不起作用，因为有很多区间，百分比会导致li不居中。

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

没有办法在你想要float:left;的元素中居中。我认为混乱是因为您认为可以围绕ol进行li换行。问题是，这不是ol的工作方式。