居中左对齐列表项目

我有一些列表项目的集合，我希望在包装时将其左对齐，但集中在类似iOS图标在主屏幕上显示的列表中。居中左对齐列表项目

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

enter image description here

我知道我可以居中父容器内的列表中，但仍然不会中心自本身是创建微胖列表中的列表项。

我的造型如下：

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/

如何删除不需要的填充物，或中心的项目列表中，同时确保第二行是左是否合理？

来源

2014-04-01 Matt Garriott

我不认为这可以完成你描述的方式，而不使用JS。 – badAdviceGuy

@badAdviceGuy我认为你可能是对的。大多数情况下，我都在发布这个问题，希望我错了。 –

如果将'ul'包装在容器中并将绿色的bg放在该容器上，则可以将'ul'居中。这是一个选择吗？ –

不知道这是你想要什么，但我加

ul { 
    max-width: 550px; 
    }

移除填充在右侧。

如果这不是它可以显示你想要的图片吗？你的问题不是100％清楚。

来源

2014-04-09 23:21:54 Kwestion

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

居中左对齐列表项目

回答

相关问题