设定元件的宽度在百分比响应

Question

如果设置了含有四个项100%所述容器（div）和使元件（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

链接拨弄：http://jsfiddle.net/arshadmuhammed/n4e1ncvh/1/

添加float:left到贵丽

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

对第二个问题的回答：
2）不给边距，给边框&框大小给你的锂，以便它们之间的距离均匀。

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

Answer 2

正如你说，当你设置宽度，他是100％，并且图像宽度是25％，那么，为什么最后一个图像进行到下一行，因为你还没有定义的，你的图像的位置。增加float:left;在你的代码..

Answer 3

这是因为你的HTML内嵌块之间的空白。删除：

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

更新的jsfiddle：http://jsfiddle.net/somj9pq2/4/