設定元件的寬度在百分比響應

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/