div 下的活动选项卡边框底部而不是 div

Question

我制作了一个带有 2 个标签的标签包装器。在选项卡下，我有一个 div 内容。

这是我的代码：

.tab-wrapper {
  width: auto;
  padding-left: 17px;
  background-color: aqua;
  white-space: nowrap;
  display: table-cell;
}

.content {
  background-color: aqua;
}

.role-tab {
  cursor: pointer;
  display: inline-block;
  height: 50px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  margin-right: 19px;
}

.role-tab>p {
  display: table-cell;
  height: 50px;
  overflow: visible;
  vertical-align: middle;
  width: 100%;
}

.role-tab-active {
  border-bottom: 3px #108DE7 solid;
  font-weight: bold;
}

<div class="tab-wrapper">
  <div class="role-tab role-tab-active">
    <p>Role tab 1</p>
  </div>
  <div class="role-tab">
    <p>Role tab 2</p>
  </div>
</div>
<div class="content">
  <p>Content</p>
</div>

造型和一切都很好。现在我想添加一些 padding-top，这样 border-bottom 就会位于 div 之下。这是我想要的截图：

我希望 border-bottom 位于下方下方 div 而不是位于下方 div.

我试过 margin-top、padding-top 和 top，但没有用

当标签处于活动状态时，我该如何实现border-bottom在div的下方？

Answer 1

您不能通过填充和边距移动边框。它不是元素而是元素的一部分。

给.tab-wrapper一个静态高度而不是默认的auto。无论边框的大小如何，包含的 div 都会相应地进行调整，因此我们给它一个静态高度以允许溢出。然后使之成为display:flex.

.tab-wrapper {
    width: auto;
    padding-left: 17px;
    background-color: aqua;
    white-space: nowrap;
    display: flex; 
    height: 50px;
}

您可以看到父项和选项卡项的高度均为 50px，但在呈现时并非如此。 box-sizing: content-box 是默认值 css 属性，你的官方活动角色标签高度是 53px，因此，div 溢出 3px 并给出边框 "under the div" 效果

Fiddle: https://jsfiddle.net/c5u3wzv2/5/

Answer 2

只需为活动 class 设置 margin-bttom: -3px; 即可完成：

.role-tab-active {
    margin-bottom:-3px;
    border-bottom: 3px #108DE7 solid;
    font-weight: bold;
}

请参阅以下代码段：

.tab-wrapper {
    width: auto;
    padding-left: 17px;
    background-color: aqua;
    white-space: nowrap;
    display: table-cell; 
}

.content{    
    background-color: aqua;
}

.role-tab {
    cursor: pointer;
    display: inline-block;
    height: 50px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
    margin-right: 19px;
    margin-bottom:-3px;
}

    .role-tab > p {
        display: table-cell;
        height: 50px;
        overflow: visible;
        vertical-align: middle;
        width: 100%;
    }

.role-tab-active {
    margin-bottom:-3px;
    border-bottom: 3px #108DE7 solid;
    font-weight: bold;
}

<div class="tab-wrapper">
    <div class="role-tab role-tab-active">
        <p>Role tab 1</p>
    </div>
    <div class="role-tab">
        <p>Role tab 2</p>
    </div>
</div>

<div class="content">
<p>Content</p>
</div>

div 下的活动选项卡边框底部而不是 div

Active tab border bottom under the div instead in the div

html

css

margin