css - 响应 : How to float:left li with centrally aligned ul?

Question

这是我第一次尝试响应式设计，所以我尽量保持简单。

我有一个 <ul>居中对齐，每行 3 张图像。但是，如果最后一行只有 1 或 2 张图像，则整行居中对齐，我希望图像向左对齐(因此它们与顶部的垂直对齐)。

这可以通过 float:left 轻松完成.但是，我希望每行的图像数量适应窗口大小，同时保持 <ul>以屏幕为中心。

这是一个 jsFiddle底行只有一项，居中。如果您调整窗口大小使其变小，每行中的数字或元素将调整并且列表将保持在屏幕中央，但最后一行仍将居中。有什么方法可以让最后一行向左对齐吗？

编辑:根据要求，这里有一些图片。这就是我要找的: <ul>在屏幕上居中，但底行向左对齐。

但是，如果我们调整窗口大小，列表会适应，但是 <ul>仍然在屏幕上居中，底行仍然向左对齐。

我怎样才能做到这一点？

Answer 1

通常我会建议给 ul 一个固定的宽度和边距:0 auto；居中，但是如果您希望它随页面扩展，则只需给它一些固定的左右边距。

http://jsfiddle.net/gQBpU/13/

ul {
    max-width:800px;
    margin: 0 50px;
}

ul li {
    float: left;
}

ul li img {
    margin:5px;
}