CSS-居中对齐多行列表

我希望将div中的多行列表集中对齐：

在本例中，我在

ul

上设置了一个固定宽度，以演示我想要实现的目标。但是，我需要

ul

的宽度是动态的，以便它只包含列表项（固定宽度），即收缩以适应。列表项的每一行应该从左边开始，并在进入新行之前尽可能多地容纳项目

div

的宽度是可变的，因此，例如，如果

div

稍微宽一点，它会如下所示：

我试过各种方法，但似乎比我想象的要困难得多

ul {
    background-color: red;
    width: 80%;
    margin: 0 auto;
}
li {
    display: inline-block;
    width: 49%;
    border: 1px solid black;
}

---

我使用了49%，但您可以使用CSS

框大小：边框框来避免这种情况，并使用一个固定的50%。
将ul和li元素设置为内联显示

 <div style="width:20%;">
     <ul style="display:inline;">
       <li style="display:inline;">Foo</li>
       <li style="display:inline;">bar</li>
     </ul>
 </div>



Foo
条形图


JSFIDLE示例：
我设法找到了本质上相同的问题：


结果是没有好的解决办法。一种方法是使用媒体查询设置
ul
的宽度。另一种方法是使用jQuery插件，如

我可能会在我的网站上使用砖石结构，所以我想我会走这条路，非javascript用户退回到非中心布局。
我还应该指定列表在进入下一行之前，每行应容纳尽可能多的列表项，例如，我刚刚编辑了问题以使事情更清楚。您的li是否始终是100px的倍数？或者这只是为了演示？UL必须有背景吗？所有的li宽度都相同吗？只需将li宽度从49%更改为100px或其他。UL仍将始终为父分区的80%或任何您想要的最大宽度。没有背景您无法分辨。所有
li
s始终为100px，
UL
不必有背景。
ul
最多可以填充
div
的100%，但是如果我将宽度设置为100%（或自动），ul将不再居中：他肯定希望ul仅为lis的宽度。您的示例是100%宽度，如果是父项。是的，正如Leeish所说，
ul
应仅为包含在中的
li
s的宽度。事实证明，很难解释我想要达到的目标！是的，我错过了。我更新了这个示例，将ul和li元素都设置为内联渲染，但我认为这并不能完全满足您的需要。