放下后，列表元素保持空白

Question

我有4个列表元素水平放置一个接一个。当我开始调整窗口大小时，其中一个正在下降到下一行，而是保持空白区域。 HTML：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS：

ul > li { 
    width: 120px;
    height: 50px;
    float: left;
}

JSFiddle example
我的问题是：如何在上一个列表元素之后删除此空格？

我已经尝试过自动边距，但它们并没有为我工作 谢谢。

编辑：可能问题不是很容易理解。我做了一些图片来看问题。

编辑：由于没有人正确回答问题，我更新了这个问题并将一些图片固定在帖子上。如果你向我解决这个问题，这将是非常有帮助的。谢谢。

Answer 1

好吧试试这个

ul{padding:0px}
ul > li { 
    width: 25%;
    height: 50px;
    background-color:#000;
    float: left;
    border: 1px solid white;
    list-style-type: none;
    margin: 0 -1px;
}

http://jsfiddle.net/GaGSf/4/

Answer 2

试试这个？ IT工作

ul > li { 
width: 24.5%; /*important*/
height: 50px;
background-color:#000;
float: left;
margin-left: 0.5%; /*important*/
list-style-type: none;
}

ul{margin:0px;padding:0px;} /*important*/

请回复。 http://jsfiddle.net/GaGSf/2/的新jsfiddle。