使用左浮動的左對齊項目水平居中列表

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工作方式。