请问我这个为什么会重叠在一起呢？我不是给每一个i都设置不同的top和left值了吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动生成10个li</title>
    <style>
 *{
            margin:0;
            padding:0;}
    ul,li{
        list-style-type:none;}
    ul{
        position: relative;}
        li{
            background:red;
            width:50px;
            height: 50px;
            font-size:30px;
            text-align: center;
            line-height:50px;
            color: white;
            margin:10px;
            position: absolute;
        }
    </style>
    <script>
 window.onload = function () {
            var oBtn = document.getElementById('btn1');
            var oUl = document.getElementById('ul1');
            var aLi = document.getElementsByTagName('div');
            oBtn.onclick = function () {
                for(var i=0;i<10;i++){
                    oUl.innerHTML += "<li>"+i+"</li>";
                }
                for(var i=0;i<aLi.length;i++){
                    aLi[i].style.left = 10+i*60+"px";
                    aLi[i].style.top= 10+i*60+"px";
                }
            }
        }
    </script>
</head>
<body>
<input id="btn1" type="button" value="自动生成10个LI">
    <ul id="ul1"></ul>
</body>
</html>

慕九州7009252

浏览 1139回答 1

请问我这个为什么会重叠在一起呢？我不是给每一个i都设置不同的top和left值了吗？

1回答