html - 水平居中左浮动、左对齐项目的列表

Question

我有一个div包含几个sections。其中一个sections 包含一个ol，并且它的所有lis 都向左浮动。我试图使ol收缩在一条线上包含尽可能多li的 s ，并水平居中ol同时保持lis 左对齐。

这就是我所拥有的：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;
}

当lis 都可以放在一行上时，列表居中：

当lis 落在第二行时，sectionandol增长并且整个事情是左对齐的：

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

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

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

---

这些问题相似但不同：

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

Answer 1

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

编辑

让我试着重新表述一下。 ol是块元素，就像 adiv是块元素一样。这意味着它填满了它所在的空间。这在您的示例中由橙色边框表示。您想要的是ol占用不到 100% 的空间。有很多不同的方法，但你总是从列表开始尽可能多的空间。

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

另一种方法是设置ol. 这与设置宽度相同。

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