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

Question

我有一个包含几个section的div 。 其中一个section包含一个ol ，并且它的所有li都向左浮动。 我试图让ol缩小到包含多达li S作为它可以在同一行，并且水平居中的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增长，整个部分左对齐：

我试图让它看起来像这样（取决于可用的宽度，如果需要，该section也可以收缩）：

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

ol为什么不缩小？ 我怎样才能解决这个问题？

---

这些问题相似但不同：

• 将div中的浮动列表项<li>居中或其<ul> - 在接受的答案中，所有列表项都居中
• 我可以将<ul>与左对齐的<li>居中吗？ - 每个项目都有自己的行

Answer 1

ol以中心为中心。 你已将它设置为65%宽度。 如果在重新调整大小时查看橙色边框，它始终居中。

编辑

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

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

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

没有办法在你想要float:left;的元素中居中东西float:left; 。 我想混淆的来源，因为你认为你可以让ol周围的包裹li 。 问题是，这不是ol工作方式。