Question

我有以下代码段：

＆＃13;

h2 { padding: 0; margin: 0; }
.middle-bar { background-color: #b0b0b0; border-bottom: 2px solid black; }
.middle-bar h2 { border-bottom: 1px solid white; border-right: 1px solid white; display: inline-block }
.above-main { display: inline-flex; }

＆＃13;

<div class="middle-bar">
  <h2>TEST</h2>
  <div class="above-main">
    <span>test test 123</span>
  </div>
</div>

＆＃13;

我正在尝试将其设为父级（middle-bar）底部边框未在<h2>元素下传递（以便为该部分使用<h2> border-bottom）。

如果我将border-bottom: 2px solid black;设置为above-main类，则只会强调测试测试123.如果我将above-main设置为display: block;（或display: flex;），它的行为类似于block元素，并在<h2>下方生成一个新行。

是否有人知道如何从子元素border-bottom: 1px solid white;获取<h2>到＆＃34;覆盖＆＃34;来自父border-bottom: 2px solid black;元素的.middle-bar？

谢谢。

Answer 1

在上主div上设置边框底部而不是外部div。

编辑：正如您已经尝试过的那样： h2上的margin-bottom: -1px解决了吗？

Answer 2

也许你想要这个？

h2 { padding: 0; margin: 0; }
.middle-bar .above-main { background-color: #b0b0b0; border-bottom: 2px solid black; }
.middle-bar h2 { border-bottom: 1px solid white; border-right: 1px solid white; display: inline-block }
.above-main { display: inline-flex; }

<div class="middle-bar">
  <h2>TEST</h2>
  <div class="above-main">
    <span>test test 123</span>
  </div>
</div>

CSS - 从子元素边框覆盖父元素

2 个答案: