对齐左对齐列表项

Question

我有一些列表项目，我希望在换行时左对齐，但在列表中居中，类似于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/

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

Answer 1

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

ul {
   max-width: 550px;
   }

删除右侧的填充。

如果不是，你可以展示你想要的照片吗？你的问题不是100％清楚。