Suppose I specify that the container (div) holding four items should be 100% wide, and each element (li) should be 25% with no margins or padding. Shouldn't each item perfectly fit on one line within the container? Why does it not align as expected, causing the last one to spill onto the next line?
Review the HTML structure on 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>
The accompanying CSS style rules are listed below:
* {
margin: 0;
padding: 0;
}
div {
width: 100%;
}
li {
display: inline-block;
list-style: none;
width: 25%;
}
img {
width: 100px;
}