Auto margin with block element in IE7
I have been trying to create LI elements with float left and an image (as a "block") inside of them. The code works fine in all browser, except for IE 7 (and 6), where the LI are organized vertically instead of horizontally. What should I change in order for the code to work well in IE7? (you can find the code at http://jsbin.com/ilexa/edit as well) .
CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style>
ul {
width:700px;
}
li {
float:left;
margin:10px;
}
li img {
display:block;
margin: 0 auto ;
width:50px;
height:50px;
}
</style>
</head>
<body>
<ul>
<li><img src="http://dummyimage.com/50x50/000/fff" /></li>
<li><img src="http://dummyima开发者_运维百科ge.com/50x50/000/fff" /></li>
<li><img src="http://dummyimage.com/50x50/000/fff" /></li>
<li><img src="http://dummyimage.com/50x50/000/fff" /></li>
<li><img src="http://dummyimage.com/50x50/000/fff" /></li>
<li><img src="http://dummyimage.com/50x50/000/fff" /></li>
</ul>
</body>
</html>
Is it necessary to have the <img> as block? Can't the spacing be completely handled by the <li>? An alternative could be to declare also <img> as float: left - or perhaps even inline-block (see Block-level elements within display: inline-block).
加载中,请稍侯......
精彩评论