当出现连续浮动的元素,且浮动的方向和margin(margin-left)的方向相同时,队首的元素会出现双倍的margin。解决方法:float:left; margin-right; 父亲的padding-right:多少px;
解决后的图:
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0;margin:0;}
ul{
height:300px;border:1px solid red;list-style:none;padding-left:40px; /*解决IE6的双倍margin问题,同时让父亲的padding挤出*/
}
li{
float:left; /*解决IE6的双倍margin问题,让float浮动的方向和margin的方向相反,这是个好的习惯*/
height:40px;width:100px;background-color:pink;margin-right:40px; /*解决IE6的双倍margin问题,让float浮动的方向和margin的方向相反,这是个好的习惯*/
}</style>
</head>
<body>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul></body>
</html>