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

百变猪娃娃 2013-11-05 10:14:57 
<!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"><</span>

            <span class="next">></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>


为何"上午"会向下移动了，"晚上"不在方格子里了。
大家看看是哪里的样式不对了。
...全文
848 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
百变猪娃娃 2013-11-05
  • 打赏
  • 举报
 回复
引用 2 楼 calmcrime 的回复:
你生成的div 继承了li的line-height，所以 需要改一下
谢谢，刚好我也搞定了。
001007009 2013-11-05
  • 打赏
  • 举报
 回复
你生成的div 继承了li的line-height，所以 需要改一下
001007009 2013-11-05
  • 打赏
  • 举报
 回复 
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++;
                }
10、标签的嵌套和标签嵌套的意义
div标签嵌套span标签，建议写成三行，会比较好看 下面的嵌套写法是错误的，不符合HTML语法 因为它们相互嵌套，这明显是错误的 因为br标签是单标签，不存在结束标签，这应该写成两个独立的标签 编写一个HTML中不...
ul里不能直接嵌套div
在ul下，直接嵌套div，在ie7以以前版本，会出现的状况是：div会被离它最近的li包裹住。 请看dome <ul class="clearfix" > <li>1</li> <li>2</li> <li>3</li> ...
p标签里面不能嵌套div
p标签里面不能嵌套divCSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素...
html P嵌套div,HTML里为什么不能在

标签中嵌套<div>标签

例如我们常用到的div，o，ul，dl，table，h1...h6等，这些都是块级元素；而像a，b，i，em，img，span等就是内联元素了。在开发过程中，我们避免不了各种元素的嵌套，但是有时候我们在不知不觉中就错误地嵌套元素了。...
为什么p元素内不能嵌套Div元素（随笔）
在开发中遇到的实际问题。
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章