防止 CSS 中的“双”边框

Question

假设我有两个相邻的 div（以 https://chrome.google.com/webstore/category/home 为参考）并带有边框。

有没有办法（最好是 CSS 技巧）来防止我的 div 看起来像有双边框？看看这张图片以更好地理解我的意思：

你可以看到两个 div 相交的地方，看起来像是有一个双边框。

Answer 1

如果我们谈论的元素不能保证以任何特定顺序出现（可能是一行中的 3 个元素，然后是一行有 2 个元素的行，等等），您需要可以放置在每个元素上的东西在集合中。该解决方案应涵盖：

.collection {
    /* these styles are optional here, you might not need/want them */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid; /* use instead of border */
    margin-top: 1px;
    margin-left: 1px;
}

请注意，大纲不起作用in older browsers（IE7 和更早版本）。

或者，您可以坚持使用边框并使用负边距：

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

Answer 2

#divNumberOne { border-right: 0; }

Answer 3

HTML：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

​CSS：

div {
    border: 1px solid #000;
    float: left;
}

div:nth-child(n+2) {
    margin-left: -1px;
}

Demo

包括 ie9.js 以支持 IE8（它对所有 CSS 选择器/伪元素都非常有用）。

Answer 4

另一个可以考虑的解决方案是使用 CSS Adjacent sibling selector。

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Answer 5

我迟到了，但尝试使用大纲属性，如下所示：

.item {
  outline: 1px solid black;
}

CSS 中的轮廓不占用物理空间，因此会重叠以防止出现双边框。

Answer 6

您可以使用 odd 选择器来实现这一点

.child{
   width:50%;
   float:left;
   box-sizing:border-box;
   text-align:center;
   padding:10px;
   border:1px solid black;
   border-bottom:none;
}
.child:nth-child(odd){
   border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
   border-bottom:1px solid black
}

<div>
    <div class="child" >1</div>
    <div class="child" >2</div>
    <div class="child" >3</div>
    <div class="child" >4</div>
    <div class="child" >5</div>
    <div class="child" >6</div>
    <div class="child" >7</div>
    <div class="child" >8</div>
</div>

Answer 7

如果 div 都具有相同的类名：

div.things {
    border: 1px solid black;
    border-left: none;
}

div.things:first-child {
    border-right: 1px solid black;
}

这里有一个JSFiddle demo。