设置重叠边框的div

时间:2017-02-01 15:19:23

标签: jquery html css

是否有一种简单的方法可以重叠marker['nextrowkey'] s上的边框?

说你有这个:



div

.box {
  border: 1px solid #ccc;
  width: 50px;
  height: 50px;
}




你可以看到一个&#34;双边界&#34; <div class='box'></div> <div class='box'></div> <div class='box'></div> <div class='box'></div>聚会的地方。 我想在div s之间只显示一个1px边框。

我知道你可以设置不同的类,但想知道一个更简单的解决方案。

为什么我的问题不同 好吧,我没有一个容器包裹在divs。因此,根据该答案,div必须应用于父元素或包装元素。

2 个答案:

答案 0 :(得分:6)

您可以通过CSS获得几个选项。你可以这样做:

.box + .box {
    margin-top: -1px;
}

或者

.box + .box {
    border-top-width: 0px;
}

答案 1 :(得分:2)

试试此代码

<div class="container">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>


.box {
  border: 1px solid #ccc;
  width: 50px;
  height: 50px;
  margin-bottom: -1px;
}

.box:last-child {
  margin-bottom: 0;
}

现场演示 - https://jsfiddle.net/8cc8hoxf/