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

Question

我希望在每行上显示最多三ul的{​​{1}}。每个li包含一个宽度相等的垂直居中图像，所以我觉得这很容易。但是，我无法阻止它溢出：

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

li

我该如何解决这个问题？

更新：这是一个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

告诉li s 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;
}​