Javascript can'；我不明白为什么布局不正确

我正在建立一个日历网页。在javascript插入新创建的元素之前，布局是良好的。但是在添加javascript代码之后，第一行中的数字开始表现出奇怪的行为。我不明白为什么。这是代码

var date=new date（），y=date.getFullYear（），m=date.getMonth（）；
var firstDate=新日期（y，m，1）；
var lastDate=新日期（y，m+1，0）；
var firstDay=firstDate.getDay（）；
变量天数=document.querySelector（“.days”）；
for（变量i=0；i

*{框大小：边框框；}
ul{列表样式类型：无；}
正文{字体系列：Verdana，无衬线；}
.月{
填充：70px 25px；
宽度：100%；
背景：#1abc9c；
}
月保险费{
保证金：0；
填充：0；
}
李先生{
颜色：白色；
字体大小：20px；
文本转换：大写；
字母间距：3px；
}
.month.prev{
浮动：左；
填充顶部：10px；
}
.下个月.下个月{
浮动：对；
填充顶部：10px；
}
.平日{
保证金：0；
填充：10px0；
背景色：#ddd；
}
.工作日李{
显示：内联块；
宽度：13.6%；
颜色：#666；
文本对齐：居中；
}
.天{
填充：10px0；
背景：#eee；
保证金：0；
}
李天{
列表样式类型：无；
显示：内联块；
宽度：13.6%；
文本对齐：居中；
边缘底部：5px；
字体大小：12px；
颜色：#777；
}
.李天.活动{
填充物：5px；
背景：#1abc9c；
颜色：白色！重要
}
/*为较小屏幕添加媒体查询*/
@媒体屏幕和屏幕（最大宽度：720px）{
.工作日李，.工作日李{宽度：13.1%；}
}
@媒体屏幕和屏幕（最大宽度：420px）{
.工作日李，.工作日李{宽度：12.5%；}
.days li.active{padding:2px；}
}
@媒体屏幕和屏幕（最大宽度：290像素）{
.工作日李，.工作日李{宽度：12.2%；}
}

CSS日历

❮
❯

八月

2016



钼
屠
我们
Th
Fr
Sa
苏


一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,
十三,
十四,
十五
十六,
十七,
十八
十九,
二十
二十一,
二十二
二十三
二十四
二十五
二十六
二十七
二十八
二十九
三十
三十一

发生这种情况是因为

显示：内联块用于列表项，在第一行中有没有文本的li项。

我建议您尝试使用
float:left
这是你的电话号码

作为另一种选择，您可能希望尝试使用flexbox。这是另一个

在这种情况下，不需要任何修正。只需将
display:inline block
从ul中移除，并将这些样式应用于现有代码

    .days {
  display: flex;
  flex-wrap: wrap;
}

.weekdays  {
  display: flex;
}

您正在列表项上使用
内联块
。此样式
内联块
会创建一些额外的空间。有许多方法可以删除此空间

一种方法是在父项上设置
字体大小：0
和
字母间距：-4px
，并在子项上重置，如下所示

.days {
    letter-spacing: -4px;
    font-size: 0;
}
.days li {
    display: inline-block;
    letter-spacing: 0;
    font-size: 12px;
}


var date=new date（），y=date.getFullYear（），m=date.getMonth（）；
var firstDate=新日期（y，m，1）；
var lastDate=新日期（y，m+1，0）；
var firstDay=firstDate.getDay（）；
变量天数=document.querySelector（“.days”）；
for（变量i=0；i

*{框大小：边框框；}
ul{列表样式类型：无；}
正文{字体系列：Verdana，无衬线；}
.月{
填充：70px 25px；
宽度：100%；
背景：#1abc9c；
}
月保险费{
保证金：0；
填充：0；
}
李先生{
颜色：白色；
字体大小：20px；
文本转换：大写；
字母间距：3px；
}
.month.prev{
浮动：左；
填充顶部：10px；
}
.下个月.下个月{
浮动：对；
填充顶部：10px；
}
.平日{
保证金：0；
填充：10px0；
背景色：#ddd；
}
.工作日李{
显示：内联块；
宽度：13.6%；
颜色：#666；
文本对齐：居中；
}
.天{
填充：10px0；
背景：#eee；
字母间距：-4px；
字号：0；
保证金：0；
}
李天{
列表样式类型：无；
显示：内联块；
字母间距：0；
宽度：13.6%；
文本对齐：居中；
边缘底部：5px；
字体大小：12px；
颜色：#777；
}
.李天.活动{
填充物：5px；
背景：#1abc9c；
颜色：白色！重要
}
/*为较小屏幕添加媒体查询*/
@媒体屏幕和屏幕（最大宽度：720px）{
.工作日李，.工作日李{宽度：13.1%；}
}
@媒体屏幕和屏幕（最大宽度：420px）{
.工作日李，.工作日李{宽度：12.5%；}
.days li.active{padding:2px；}
}
@媒体屏幕和屏幕（最大宽度：290像素）{
.工作日李，.工作日李{宽度：12.2%；}
}
CSS日历

❮
❯