Javascript 粘滞div上较厚的边界线

我正在创建自己的完整日历，但我的边框有问题。 在div接触的地方，边界线更粗，因为每个元素都有自己的边界，显然在这个地方，边界渲染两次

根据月份的不同，日历有不同的布局，所以硬编码不是一个好主意

我在这里准备了一个例子：

.block{
边框：1px纯黑；
宽度：80px；
高度：80px；
浮动：左；
}

1
2.
3.
4.
5.
6.
7使用这个

.container{
  display: inline-block;
  border-top: 1px solid black;
  border-left: 1px solid black;
}
.block {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  width: 80px;
  height: 80px;
  float:left;
}

将所有的
div
包装在一个容器中
div
并进行上述样式设置。这样元素就不会有重叠的边界


.container{
显示：内联块；
边框顶部：1件纯黑；
左边框：1px纯黑；
}
.街区{
右边框：1px纯黑；
边框底部：1px纯黑；
宽度：30px；
高度：30px；
浮动：左；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
删除除最后一个块之外的每个块的右边框

<div class="block">1  </div>
<div class="block">2  </div>
<div class="block">3  </div>
<div class="block">4  </div>
<div class="block">5  </div>
<div class="block">6  </div> 
<div class="block last">7 </div>

<style>
.block {
  border: 1px solid black;
  border-right: none;
  width: 80px;
  height: 80px;
  float:left;
}
.last {
    border-right : 1px solid black;
}
</style>

1
2.
3.
4.
5.
6.
7.
.街区{
边框：1px纯黑；
边界权：无；
宽度：80px；
高度：80px；
浮动：左；
}
.最后{
右边框：1px纯黑；
}
简单的css3选择器使用
+
可以针对同级元素。看一看

.block + .block {border-left:0px;}

希望这就是你想要的。如果需要，乐意解释或帮助提供更好的解决方案


.block{
边框：1px纯黑；
宽度：40px；
高度：40px；
浮动：左；
}
.block+.block{左边框：0px；}
1
2.
3.
4.
5.
6.
7
一个快速修复方法就是添加

margin-right: -1px;
margin-bottom: -1px;

到
.block
类

日历不是一种表格数据吗？这将使您有理由在安排边界时使用table。如果月初不是星期天，这将不起作用。@Tiedee这完全取决于OP的使用。此处发布的每个解决方案可能需要根据情况进行一些修改。在这种情况下，@Tiedee提供的解决方案更适合我。他的想法并没有限制日历从周日开始。