在 CSS 中防止“双重”边框

小开

最佳答案

#divNumberOne { border-right: 0; }

小开

将下面的 CSS 添加到右边的 div:

position: relative;
left: -1px; /* your border-width times -1 */

或者只是移除其中一个边框。

小开

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

演示

包括支持 IE8的 Ie9.js(它对于所有 CSS 选择器/伪元素都非常有用)。

小开

If the divs all have the same class name:

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


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

这里有个 JSFiddle 演示。

小开

  <div class="one"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>

CSS:

  .one{
width:100px;
height:100px;
border:thin red solid;
float:left;
}
.two{
width:100px;
height:100px;
border-style: solid solid solid none;


border-color:red;
border-width:1px;
float:left;
}

JsFiddle

小开

那么在你的 Div 周围画一个 margin:1px;怎么样。

<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
<div class="brd"></div>
<div class="brd"></div>
<div class="brd"></div>
</body>
</html>

演示

小开

我更喜欢在它们后面使用另一个 div 作为背景，并删除所有的边框。您只需要计算背景 div 的大小和前景 div 的位置。

小开

如果我们讨论的元素不能保证以任何特定的顺序出现(可能一行中有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;
}

请注意，大纲不工作在老的浏览器中(IE7和更早版本)。

或者，你可以坚持使用边框，并使用负边距:

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

小开

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

CSS

div {
border: 1px solid black;
}


div + div {
border-left: 0;
}

JsFiddle

小开

我只是吸毒

border-collapse: collapse;

在父元素中

小开

我的用例是单行中的框，我知道最后一个元素是什么。

.boxes {
border: solid 1px black  // this could be whatever border you need
border-right: none;
}


.furthest-right-box {
border-right: solid 1px black !important;
}

小开

我知道这是一个很晚的反应，但我只是想降低我的2美分的价值，因为我的做事方式不是在这里。

你看，我真的不喜欢玩利润率，especially negative margins。每个浏览器似乎只是处理这些有点不同，边距很容易受到很多的情况。

我的方法，以确保我有一个很好的表与 div，是 首先创建一个好的 html 结构，然后应用的 css。

我是这样做的:

 <div class="tableWrap">
<div class="tableRow tableHeaders">
<div class="tableCell first">header1</div>
<div class="tableCell">header2</div>
<div class="tableCell">header3</div>
<div class="tableCell last">header4</div>
</div>
<div class="tableRow">
<div class="tableCell first">stuff</div>
<div class="tableCell">stuff</div>
<div class="tableCell">stuff</div>
<div class="tableCell last">stuff</div>
</div>
</div>

现在，对于 css，我只是使用行结构来确保边框只在它们需要的位置，不会产生边距;

.tableWrap {
display: table;
}


.tableRow {
display: table-row;
}


.tableWrap .tableRow:first-child .tableCell {
border-top: 1px solid #777777;
}


.tableCell {
display: table-cell;
border: 1px solid #777777;
border-left: 0;
border-top: 0;
padding: 5px;
}


.tableRow .tableCell:first-child {
border-left: 1px solid #777777;
}

Et voila, a perfect table. 现在，很明显，这会导致你的 DIV 在宽度上有1px 的差异(特别是第一个) ，但是对我来说，这从来没有产生任何问题。如果是在你的情况下，我想你会更加依赖利润。

小开

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

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

小开

使用 Flexbox 需要添加第二个子容器，以正确获得轮廓重叠..。

<div class="grid__container">
<div class="grid__item">
<div class="grid__item-outline">
<!-- content -->
</div>
</div>
</div>

SCSS

.grid__container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}


.grid__item {
flex: 0 1 25%; // grid of 4
margin: 0 0 1px; // margin-bottom to prevent double lines
}


.grid__item-outline {
margin: 0 0 0 1px; // margin-left to prevent double lines
outline: 1px solid #dedede;
}

小开

我已经迟到了，但是试着使用轮廓属性，像这样:

.item {
outline: 1px solid black;
}

Outlines in CSS do not occupy physical space and will therefore overlap to prevent a double border.

小开

我可以用这个代码实现它:

td.highlight {
outline: 1px solid yellow !important;
box-shadow: inset 0px 0px 0px 3px yellow;
border-bottom: 1px solid transparent !important;
}

小开

一个很老的问题，但这是第一个谷歌搜索结果，所以对于任何人来说，遇到这个问题，并不希望有媒体查询重新添加边框的元素的右/左等。

我的解决办法是:

.element {
border: 1px solid black;
box-shadow: 0 0 0 1px black;
}

这样可以工作，因为您将看到由边框和阴影组成的元素周围有一个2px 的边框。然而，在元素相遇的地方，阴影重叠，使它保持2px 宽;

小开

如果你还需要在交互中改变边框颜色(例如表单中的样本选择器) ，我发现了一个不错的技巧来做到这一点，使用负边距、填充调整和转换的组合。看看这个:

.parent{
display: flex;
width: 100%;
max-width: 375px;
margin-left:1px;
}


.child {
margin-left: -1px;/* hide double borders behind their siblings */
flex: 1 0 auto;
}


.child input {
display:none
}


.child label {
display:block;
border: 1px solid #eaeaea;
min-height: 45px;
line-height: 45px;
cursor: pointer;
padding: 0 10px; /* will be changed when input is checked */
font-size: 15px;
text-align: center;
}


.child input:checked+label {
border: 1px solid red;
transform: translateX(-1px);
padding-left: 11px;
padding-right: 9px;
background-color: #fafafa;
}

<div class="parent">
<div class="child">
<input id="swatch-1" type="radio" value="1" name="option" checked="true">
<label for="swatch-1">Element 1</label>
</div>
<div class="child">
<input id="swatch-2" type="radio" value="2" name="option">
<label for="swatch-2">Element 2</label>
</div>
<div class="child">
<input id="swatch-3" type="radio" value="3" name="option">
<label for="swatch-3">Element 3</label>
</div>
</div>

小开

为了补充一个9年前的问题，另一个干净利落的方法是:

将 border-left和 border-top添加到父级
向每个子节点添加 border-right和 border-bottom