响应：如何浮动：左侧中央对齐的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;
}

Answer 2

如果您将所有图片放在一个li中，然后您执行float: left，那么我认为它可能有效。