<!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>
請問我這個為什么會重疊在一起呢？我不是給每一個i都設置不同的top和left值了嗎？
慕九州7009252
2016-12-01 15:18:09
