html - 防止包含图像的 li 元素溢出

Question

我希望显示一个 ul，每行最多包含三个 li。每个 li 都包含一个垂直居中且宽度相等的图像，所以我认为这很容易。但是，我无法阻止它溢出:

相反，我希望将第四张图片清除到新行。这是我的代码:

<ul>
    <li><a href="#"><img src="1.jpg"></a></li>
    <li><a href="#"><img src="2.jpg"></a></li>
    <li><a href="#"><img src="3.jpg"></a></li>
    <li><a href="#"><img src="4.jpg"></a></li>
</ul>​

ul {
    border-spacing: 2px;
    width: 150px;
    background: red;
}

li {
    height: 48px;
    background: #000;
    display:table-cell;
    vertical-align:middle;
}
img {
    width: 48px;
    display:block;
    vertical-align:middle;
}​

我该如何解决？

更新:这是一个 jsfiddle有一个更清楚的例子。

Answer 1

你试过设置溢出吗？

ul {
    border-spacing: 2px;
    width: 150px;
    background: red;
    overflow-x:hidden
}

为了让“溢出”移动到下一行，让你的 UL 和三个图像一样宽，在你的 li 上使用 float:left 并设置你的 li 的宽度。

ul {
    width:400px;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;
}

ul li {
    width:200px;
    height:200px;
    display:block;
    float:left;
}