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>

View on JSFIddle

我的问题是：有没有一种智能或棘手的方法来解决这个问题？我可以使用纯JavaScript或CSS，但不能使用jQuery。

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

将所有divs包裹在容器div内并执行上述样式。这样，元素就不会有重叠的边界。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在这里，我降低了高度，以提高视野。

Answer 2

快速修复只是添加

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

到.block班。

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

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>

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>

坚持div的更厚的边界线

4 个答案: