108

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

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

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

4

19 回答 19

94

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

请注意，outline在旧浏览器（IE7 和更早版本）中不起作用。

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

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}
于 2012-10-02T15:14:13.530 回答
25

#divNumberOne { border-right: 0; }

于 2012-10-02T14:21:01.123 回答
23

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

演示

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

于 2012-10-02T14:27:14.907 回答
21

另一种可能考虑的解决方案是使用 CSS Adjacent 兄弟选择器。

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

于 2014-09-17T00:40:28.423 回答
11

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

.item {
  outline: 1px solid black;
}

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

于 2019-09-26T15:16:50.623 回答
7

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

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

在此处输入图像描述

于 2017-09-30T11:38:03.070 回答
5

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

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

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

这里有一个JSFiddle 演示。

于 2012-10-02T14:28:27.013 回答
2

将以下 CSS 添加到右侧的 div 中：

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

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

于 2012-10-02T14:21:11.857 回答
2

使用 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;
}
于 2019-04-23T10:44:50.190 回答
1

如果您还需要在交互时更改边框颜色（例如，表单中的样本选择器），我发现了一个很好的技巧，使用负边距、填充调整和变换转换的组合。看看这个：

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

于 2021-02-24T17:54:40.730 回答
0 
  <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 ​</p>

于 2012-10-02T14:28:53.907 回答
0

我只是用

border-collapse: collapse;

在父元素中

于 2016-09-14T10:37:58.650 回答
0

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

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

.furthest-right-box {
  border-right: solid 1px black !important;
}
于 2017-03-08T06:31:45.770 回答
0

我知道这是迟到的反应，但我只是想放弃我的 2 美分，因为我的做法不在这里。

你看，我真的不喜欢玩利润，尤其是负利润。每个浏览器似乎处理这些只是有点不同，并且边距很容易受到很多情况的影响。

我确保我有一个带有 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，我只是使用 rows 结构来确保边框只在它们需要的位置，不会导致边距；

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

瞧，一张完美的桌子。现在，显然这会导致您的 DIV 在宽度上有 1px 的差异（特别是第一个），但对我来说，这从未造成任何类型的问题。如果在你的情况下确实如此，我想你会更依赖利润率。

于 2017-05-25T11:36:12.680 回答
0

我能够使用以下代码实现它：

td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}
于 2019-10-16T19:53:22.137 回答
0

一个非常古老的问题，但这是第一个谷歌结果，所以对于遇到这个并且不想让媒体查询在移动设备等元素的右侧/左侧重新添加边框的任何人。

我使用的解决方案是：

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

这是有效的，因为您会在由边框和阴影组成的元素周围看到一个 2px 的边框。然而，在元素相遇的地方，阴影重叠，使其保持 2px 宽；

于 2020-08-28T09:39:54.363 回答
0

为了增加一个 9 岁的问题，另一种干净且响应迅速的方法是：

  • 向父级添加border-leftandborder-top
  • border-right将和添加border-bottom到每个孩子
于 2021-09-27T09:26:42.543 回答
-1

margin:1px;在你的 div 周围给出一个怎么样？

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

演示

于 2012-10-02T14:30:32.410 回答
-3

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

于 2012-10-02T14:40:58.857 回答