居中左对齐列表项答案

【问题标题】：Centering Left Justified List Items居中左对齐列表项
【发布时间】：2014-05-12 20:36:26
【问题描述】：

我有一组列表项，我希望在换行时保持对齐，但在列表中居中，类似于 iOS 图标在主屏幕上的显示方式。

我的问题是，在某些屏幕尺寸下，元素会自动换行，但不需要的填充将保留在右侧。

我知道我可以在父容器中将列表居中，但这仍然不会使列表项居中，因为列表本身正在创建额外的填充。

我的样式如下：

li {
    width: 100px;
    height:100px;
    background-color: blue;
    float: left;
    margin: 5px;
}
ul {
    list-style: none;
    text-indent: none;
    padding-left: 0;
    background-color: green;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
}

这个小提琴演示了这个问题：http://jsfiddle.net/Ea8Kd/1/

如何删除不需要的填充，或将列表中的项目居中，同时确保第二行左对齐？

【问题讨论】：

我认为不使用 JS 就无法按照您所描述的方式完成。
@badAdviceGuy 我认为你可能是对的。大多数情况下，我发布这个问题是希望我错了。
如果您将ul 包装在一个容器中并将绿色背景放在该容器上，您可以将ul 居中。这是一个选择吗？
@ralph.m 不幸的是，即使我在父容器中将列表居中，里面的列表项仍然会出现偏离中心。这是因为列表占用了右侧的额外空间，我似乎无法删除。
啊，是的，我明白了。有一些解决方案，例如将框设置为 display: inline-block 并证明它们的合理性，但您需要 a few extra hacks 才能使一切看起来正确。

标签： html css

【解决方案1】：

不确定这是你想要的，但我添加了

ul {
   max-width: 550px;
   }

删除了右侧的填充。

如果不是这样，您能否展示您想要的图片？你的问题不是 100% 清楚。

【讨论】：

最初，我希望有一个解决方案可以让列表调整到屏幕大小，以便每行可以有可变数量的图标。但是，设置最大宽度有效地限制每行可以出现的项目数量似乎是实现此功能的唯一方法。