html - Setting widths of elements in percentages for responsiveness -
if set container (div) containing 4 items 100% , make elements (li) 25% no margins or paddings on of elements, shouldn't each of elements fit on 1 line in container? why not , why last 1 run onto next line?
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; }
link fiddle: http://jsfiddle.net/arshadmuhammed/n4e1ncvh/1/
add float:left li
li { display: inline-block; list-style: none; width: 25%; float:left; } answer second question:
2) instead of giving margin, give border & box-sizing li inorder spacing between them.
li { box-sizing:border-box;/*new*/ list-style: none; width: 25%; float:left; background:red; border:20px solid white;/*new*/ }
Comments
Post a Comment