css - 响应式：如何浮动：左 li 居中对齐 ul？

Question

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

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

这很容易用float:left. 但是，我希望每行上的图像数量适应窗口大小，同时保持<ul>屏幕居中。

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

编辑：根据要求，这是一些图片。这就是我正在寻找的：在屏幕<ul>上居中，但底行与左侧对齐。

在此处输入图像描述

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

在此处输入图像描述

我怎样才能做到这一点？

score 3 · Accepted Answer

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

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

ul li {
    float: left;
}

ul li img {
    margin:5px;
}

</p>

score -1 · Accepted Answer

如果您将所有图像放在一个中li，然后您这样做，float: left那么我认为它可能会起作用。

2 回答 2