粘性div上的边框线更粗

Question

我正在创建自己的完整日历，但是我遇到了边框问题。 在div接触处，边框线会变粗，因为每个元素都有自己的边框，在这些地方显然会呈现两次边框。

根据月份，日历具有不同的布局，因此硬编码不是一个好主意。

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

.block {
  border: 1px solid black;
  width: 80px;
  height: 80px;
  float: left;
}

<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">7 </div>

在JSFiddle上查看

我的问题是： 有没有聪明或巧妙的方法来解决这个问题？ 我可以使用纯JavaScript或CSS，但不能使用jQuery。

- tylkonachwile

---

日历不就是一种表格数据吗？这就可以证明在排列边框时使用表格是合理的。 - Teemu

Answer 1

请提供需要翻译的内容。

.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 {
  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: 30px;
  height: 30px;
  float: left;
}

<div class="container">
  <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">7 </div>

  <div style="clear: both"> </div>
  <div class="block">8 </div>
  <div class="block">9 </div>
  <div class="block">10 </div>
  <div class="block">11 </div>
  <div class="block">12 </div>
  <div class="block">13 </div>
  <div class="block">14 </div>
  <div style="clear: both"> </div>
  <div class="block">15 </div>
  <div class="block">16 </div>
  <div class="block">17 </div>
  <div class="block">18 </div>
  <div class="block">19 </div>
  <div class="block">20 </div>
  <div class="block">21 </div>
  <div style="clear: both"> </div>
  <div class="block">22 </div>
  <div class="block">23 </div>
  <div class="block">24 </div>
  <div class="block">25 </div>
  <div class="block">26 </div>
  <div class="block">27 </div>
  <div class="block">28 </div>
  <div style="clear: both"> </div>
  <div class="block">29 </div>
  <div class="block">30 </div>
  <div class="block">31 </div>

</div>

为了更好的可见性，我已经减小了高度。

- void

---

如果一个月的第一天不是星期天，这将无法正常工作。 - Tiedye

@Tiedye 那完全取决于OP的使用。这里发布的每个解决方案都可能需要根据情况进行一些修改。 - void

在这种情况下，@Tiedye提出的解决方案对我来说更好。 他的想法不限制日历从星期日开始。 - tylkonachwile

Answer 2

一个快速的解决方法是添加

标签。

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

将内容添加到.block类中。

https://jsfiddle.net/w76o9kL4/20/

- Tiedye

Answer 3

除了最后一个块之外，删除每个块的右边框。

<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>

- hashedram

Answer 4

使用简单的css3选择器+，您可以定位兄弟元素。看一下

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

希望这是您正在寻找的内容。如果需要，很高兴为您解释或提供更好的解决方案。

.block {
  border: 1px solid black;
  width: 40px;
  height: 40px;
  float: left;
}

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

<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">7 </div>

- Gerardo BLANCO