<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> body,ul{margin:0;padding:0;} li{list-style:none}; .clear{zoom:1} .clear:after{content:"";display:block;clear:both;} #box {width:200px; height:200px;margin:55px auto;} #box ul{ width:200px; overflow:hidden;} #box li { width:50px; height:50px; background:red; float:left; margin:5px;} </style> </head> <body> <div id="box"> <ul class="clear"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> <script> var oUl=document.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var arr=[]; //定个空数组存放li浮动时候的位置； for(var i=0;i<aLi.length;i++) { // 存li浮动时的位置 arr.push([aLi[i].offsetLeft,aLi[i].offsetTop]); } for(var i=0;i<aLi.length;i++) { //开始转化 aLi[i].style.position='absolute'; //注：这里定位不能和上一个for循环在一起 aLi[i].style.left=arr[i][0]+'px'; aLi[i].style.top=arr[i][1]+'px'; aLi[i].style.margin=0; } </script>
实现原理：
定义一个数组用以保存正常布局时 li 的位置，然后在转换为绝对定位之后在使用。