如何将内部元素边框与外部元素边框结合？

Question

我有两个要素：一个是其他孩子：

＆＃13;

＆＃13;

#main {
  display: flex
}
.out {
  height: 50px;
  border-right: 3px solid green;
}
.inner {
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 2px;
  background-color: rgba(0,0,0,0.1);
  border-right: 3px solid red;
  flex-grow: 1
}

＆＃13;

<div id="main">
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/fcg6xty7/

如您所见，内部元素的边界和外部元素的边界是两个不同的边界。我希望他们是一个边界：

Answer 1

您可以使用负margin-right值来移动元素：

#main {
  display: flex
}
.out {
  height: 50px;
  border-right: 3px solid green;
}
.inner {
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 2px;
  background-color: rgba(0,0,0,0.1);
  border-right: 3px solid red;
  flex-grow: 1;
  margin-right: -3px;
}

<div id="main">
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
</div>

Answer 2

快速解决..在negetive中寻找... margin-right。

.inner {
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 2px;
  background-color: rgba(0,0,0,0.1);
  border-right: 3px solid red;
  flex-grow: 1;
  margin-right: -3px
}

Answer 3

考虑使用width ^{Ref - calc() MDN} 函数声明calc属性，以3px（或适合任何要求的值）进行抵消

请务必另外声明box-sizing: border-box ^{Ref - box-sizing MDN} ;指示浏览器为width和height指定的值中的任何边框和填充进行说明。

示例：

.inner {
    margin-top: 15px;
    margin-bottom: 5px;
    padding: 2px;
    background-color: rgba(0,0,0,0.1);
    border-right: 3px solid red;
    flex-grow: 1;
    width: calc(100% + 3px); /* + value equal to the width of containing border*/
    box-sizing: border-box;
}

代码段示范：

＆＃13;

＆＃13;

#main {
  display: flex
}

.out {
  height: 50px;
  border-right: 3px solid green;
}

.inner {
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.1);
  border-right: 3px solid red;
  flex-grow: 1;
  width: calc(100% + 3px); /* + value equal to the width of containing border*/
  box-sizing: border-box;
}

＆＃13;

<div id="main">
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以通过在内部元素上模拟带有阴影的边框来逃脱它。

删除边框，添加

  box-shadow:  0 0 0 3px red;

https://jsfiddle.net/facundocorradini/tdqt8wum/

根据需要进行调整。

如果你只想要一个右边框，那么按原样保留内边框，并使用一个插入框阴影＆＃34; border＆＃34;在外部元素

.out {
  height: 50px;
  box-shadow: inset -3px 0 0 green;
}
.inner {
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 2px;
  background-color: rgba(0,0,0,0.1);
  border-right: 3px solid red;
  flex-grow: 1
}

https://jsfiddle.net/facundocorradini/41y9pcw1/1/

顺便说一下，您将flex-grow设置为不正确的项目，应该在.out选择器中。作为.inner选择器，它不会做任何事情，因为.inner不是flex-items（不是来自flex容器的孩子，而是grand-children）。

Answer 5

@Johannes的类似答案，但右侧使用negative值，此处我们需要相对位置。但由于我们将移动元素，我们需要用负边距补偿左边部分。

是的，我同意它比右边的简单负边距更复杂，但这是另一种方式：）

#main {
  display: flex
}
.out {
  height: 50px;
  border-right: 3px solid green;
}
.inner {
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 2px 5px;
  background-color: rgba(0,0,0,0.1);
  border-right: 3px solid red;
  flex-grow: 1;
  position:relative;
  right: -3px;
  margin-left:-3px;
}

<div id="main">
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
</div>

Answer 6

我建议您使用 :after 伪选择器作为绿色边框。请查看以下代码段

＆＃13;

＆＃13;

#main {
  display: flex
}

.inner:after {
  content: "";
  height: 50px;
  border-right: 3px solid green;
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.inner {
  position: relative;
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.1);
  border-right: 3px solid red;
}

＆＃13;

<div id="main">
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
  <div class="out">
    <div class="inner">
      content
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果你想最小化你的HTML代码，我会说不需要像 div 那样

＆＃13;

＆＃13;

#main {
  display: flex
}

.inner:after {
  content: "";
  height: 50px;
  border-right: 3px solid green;
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.inner {
  position: relative;
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.1);
  border-right: 3px solid red;
}

＆＃13;

<div id="main">
  <div class="inner">
    content
  </div>
  <div class="inner">
    content
  </div>
  <div class="inner">
    content
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;