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;
}

Answer 2

告诉lis 浮动http://jsfiddle.net/8Pvtb/1/

li {


   height: 48px;
    background: #000;
    display:table-cell;
    float: left;
    vertical-align:middle;
    border-spacing: 12px;
}

但我不明白你为什么想要display:table-cell，它不是。我会用inline-block

http://jsfiddle.net/8Pvtb/5/

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

li {
    height: 48px;
    background: #000;
    display: inline-block;
    vertical-align:middle;
    border-spacing: 12px;
}
img {
    width: 48px;
    vertical-align:middle;
}​