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