html - 以响应速度的百分比设置元素的宽度

Question

如果我将包含四个元素的容器 (div) 设置为 100% 并使元素 (li) 25% 在任何元素上都没有边距或填充，每个元素不应该完全适合容器中的一行吗？为什么没有，为什么最后一个运行到下一行？

HTML ( jsFiddle )

<div>
    <ul>
        <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
        <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
        <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
        <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;    
}

div {
    width: 100%;
}

li {
    display: inline-block;
    list-style: none;
    width: 25%;
}

img {
    width: 100px;
}

Answer 1

fiddle 链接:http://jsfiddle.net/arshadmuhammed/n4e1ncvh/1/

将 float:left 添加到你的 li

li {
    display: inline-block;
    list-style: none;
    width: 25%;
    float:left;
}

第二个问题的答案:
2) 不要给边距，而是给你的 li 设置边框和框大小，以便在它们之间获得均匀的间距。

li {
    box-sizing:border-box;/*new*/
    list-style: none;
    width: 25%;
    float:left;
    background:red;
    border:20px solid white;/*new*/
}