防止 CSS 中的“双”边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12692089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preventing "double" borders in CSS
提问by john smith
Say I have two divs next to each other (take https://chrome.google.com/webstore/category/homeas reference) with a border.
假设我有两个带有边框的div（以https://chrome.google.com/webstore/category/home作为参考）。
Is there a way (preferably a CSS trick) to prevent my divs from appearing like having a double border? Have a look at this image to better understand what I mean:
有没有办法（最好是 CSS 技巧）来防止我的 div 看起来像有双边框？看一下这张图片以更好地理解我的意思：
You can see that where the two divs meet, it appears like they have a double border.
你可以看到两个 div 相遇的地方，看起来它们有一个双边框。
采纳答案by Andy
#divNumberOne { border-right: 0; }
#divNumberOne { border-right: 0; }
回答by cimmanon
If we're talking about elements that cannot be guaranteed to appear in any particular order (maybe 3 elements in one row, followed by a row with 2 elements, etc.), you want something that can be placed on every element in the collection. This solution should cover that:
如果我们谈论的是不能保证以任何特定顺序出现的元素（可能一行 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;
}
Note that outline doesn't work in older browsers(IE7 and earlier).
请注意，大纲在较旧的浏览器（IE7 及更早版本）中不起作用。
Alternately, you can stick with the borders and use negative margins:
或者，您可以坚持使用边框并使用负边距：
.collection .child {
margin-top: -1px;
margin-left: -1px;
}
回答by Giona
回答by Stephan
Another solution one might consider is using the CSS Adjacent sibling selector.
另一种可能考虑的解决方案是使用 CSS Adjacent 兄弟选择器。
The CSS
CSS
div {
border: 1px solid black;
}
div + div {
border-left: 0;
}
jsFiddle
js小提琴
回答by codegeek
You can use oddselector to achieve this
您可以使用奇数选择器来实现此目的
.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>
回答by Roddy of the Frozen Peas
If the divs all have the same class name:
如果 div 都具有相同的类名：
div.things {
border: 1px solid black;
border-left: none;
}
div.things:first-child {
border-right: 1px solid black;
}
There's a JSFiddle demohere.
这里有一个JSFiddle 演示。
回答by Michael Giovanni Pumo
I'm late to the show but try using thhe outline property, like so:
我迟到了，但尝试使用大纲属性，如下所示：
.item {
outline: 1px solid black;
}
Outlines in CSS do not occupy physical space and will therefore overlap to prevent a double border.
CSS 中的轮廓不占用物理空间，因此会重叠以防止出现双边框。
回答by bfavaretto
Add the following CSS to the div on the right:
将以下 CSS 添加到右侧的 div 中：
position: relative;
left: -1px; /* your border-width times -1 */
Or just remove one of the borders.
或者只是删除其中一个边框。
回答by JayCee
I just use
我只是用
border-collapse: collapse;
in the parent element
在父元素中
回答by Sam Henderson
My use case was for boxes in a single row where I knew what the last element would be.
我的用例是单行的盒子，我知道最后一个元素是什么。
.boxes {
border: solid 1px black // this could be whatever border you need
border-right: none;
}
.furthest-right-box {
border-right: solid 1px black !important;
}
