li里面嵌套div的问题，大家帮忙看看。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>自己写js日历</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }        ul, li {
            list-style: none;
        }        #calendar {
            width: 504px;
            border: 1px solid #dadada;
            border-radius: 3px;
        }        .c_header {
            width: 100%;
            height: 60px;
            background-color: #83d8e7;
            background-image: linear-gradient(to bottom, #abe5ef, #83d8e7);
            position: relative;
            
        }            .c_header h1 {
                font-size: 16px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #ffffff;
            }            .c_header span {
                width: 20px;
                height: 20px;
                line-height: 20px;
                color: #ffffff;
                text-align: center;
                position: absolute;
                top: 5px;
                border-radius: 50%;
                background-image: linear-gradient(to bottom, #83d8e7, #abe5ef);
                cursor: pointer;
            }                .c_header span:hover {
                    background: #83d8e7;
                }                .c_header span.pre {
                    left: 10px;
                }                .c_header span.next {
                    right: 10px;
                }            .c_header ol {
                position: absolute;
                left: 0;
                top: 30px;
                overflow: hidden;
            }                .c_header ol li {
                    float: left;
                    color: #ffffff;
                    width: 72px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    font-family:微软雅黑;
                    font-weight:bolder;
                }        .c_body {
            overflow: hidden;
        }            .c_body li {
                width: 70px;
                height: 70px;
                line-height: 70px;
                font-size: 12px;
                text-align: center;
                float: left;
                border: 1px solid gray;
                color: #333;
            }                .c_body li.active {
                    border: 1px solid #dadada;
                    background-color: #83d8e7;
                    color: #fff;
                }                .c_body li.grey {
                    color: #999;
                }
    </style>
    <script>
        window.onload = function () {
            var oCal = document.getElementById("calendar");
            var oTitle = oCal.getElementsByTagName("h1")[0];
            var oUl = oCal.getElementsByTagName("ul")[0];
            var aLi = oUl.getElementsByTagName("li");
            var oPre = oCal.getElementsByTagName("span")[0];
            var oNext = oCal.getElementsByTagName("span")[1];
            var oNow = new Date();
            var nowYear = oNow.getFullYear();
            var nowMonth = oNow.getMonth();
            var nowDate = oNow.getDate();
            var nowDay = oNow.getDay();
            var nowTime = oNow.getTime();
            var tMonth = nowMonth;//作为日历里更改的那个Month
            function createCalendar(tMonth) {
                //根据传入的月份重新算时间
                var oDate = new Date();
                oDate.setMonth(tMonth);
                oDate.setDate(1);
                var iYear = oDate.getFullYear();
                var iMonth = oDate.getMonth();
                var iDay = oDate.getDay();
                oTitle.innerHTML = iYear + "年" + (iMonth + 1) + "月";
                //初始化一下
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].innerHTML = "";
                    aLi[i].style.height = "70px";
                    aLi[i].className = "";
                }
                var iSum = 0; //存本月天数
                var bLeap = false;//是否是闰年
                if (iYear % 4 == 0 && iYear % 100 !== 0 || iYear % 400 == 0) bLeap = true;
                switch (iMonth + 1) {
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 8:
                    case 10:
                    case 12:
                        iSum = 31;
                        break;
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        iSum = 30;
                        break;
                    case 2:
                        if (bLeap) iSum = 29;
                        else iSum = 28;
                        break;
                }
                for (var i = 1; i <= iSum; i++) {
                    aLi[iDay].innerHTML = "<div style='width:25px;float:left;'>" + i + "</div><div style='float:left;'><div  style='width:40px;height:22px;'>上午</div><div style='width:40px;height:22px;'>下午</div><div style='width:40px;height:22px;'>晚上</div></div>";
                    iDay++;
                }                for (var i = 0; i < aLi.length; i++) {
                    if (aLi[i].innerHTML == nowDate && iYear == nowYear && iMonth == nowMonth) {
                        aLi[i].className = "active";
                    }
                    else if ((aLi[i].innerHTML < nowDate && iMonth == nowMonth && iYear == nowYear) ||
                        iMonth < nowMonth && iYear == nowYear ||
                        iYear < nowYear) {
                        aLi[i].className = "grey";
                    }
                }            }
            createCalendar(tMonth);
            oPre.onclick = function () {
                createCalendar(--tMonth);
            };            oNext.onclick = function () {
                createCalendar(++tMonth);
            };
        };
    </script>
</head>
<body>
    <div id="calendar">
        <div class="c_header">
            <h1></h1>
            <span class="pre">&lt;</span>
            <span class="next">&gt;</span>
            <ol>
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
            </ol>
        </div>
        <ul class="c_body">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
为何"上午"会向下移动了，"晚上"不在方格子里了。
大家看看是哪里的样式不对了。

解决方案 »

  1.   

    for (var i = 1; i <= iSum; i++) {
                        aLi[iDay].innerHTML = "<div style='width:25px;float:left;'>" + i + "</div><div style='float:left;'><div  style='width:40px;height:22px;line-height:22px;'>上午</div><div style='width:40px;height:22px;line-height:22px;'>下午</div><div style='width:40px;height:22px;line-height:22px;'>晚上</div></div>";
                        iDay++;
                    }
      

  2.   

    你生成的div 继承了li的line-height，所以 需要改一下