选项卡中的边框排列不正确

Question

当有当前时我有标签它添加了一个边框顶部，左边框和右边框。

显示的边框左边和右边边框似乎悬挂.tabs边框底部。

  

问题如何确保该标签具有类 .current   border-left和border-right将使用 .tabs 边框   底部。

CODEPEN DEMO

CSS

.tabs {
    border-bottom: 1px solid #e4e6e8;
    margin-top: 3rem;
    padding-bottom: 10px;
}

.tabs a {
    padding: 15px;
}

.tabs a.current {
    background: #fff;
    color: #222;
    border-top: 3px solid #ef4123;
    border-left: 1px solid #e4e6e8;
    border-right: 1px solid #e4e6e8;
}

HTML

<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="tabs">
        <a href="" class="current">Profile</a>
        <a href="" class="">Activity</a>
      </div>
    </div>
  </div>
</div>

Answer 1

将链接设置为inline-block，以便任何垂直填充/边距/边框都能正确影响布局中的其他元素，移除.tabs上的底部填充，我会使用{{1将元素向下推1px，使其与translateY()

上的边框重叠

.tabs

.tabs {
    border-bottom: 1px solid #e4e6e8;
    margin-top: 3rem;
}

.tabs a {
  padding: 15px;
  display: inline-block;
  transform: translateY(1px);
}

.tabs a.current {
    background: #fff;
    color: #222;
    border-top: 3px solid #ef4123;
    border-left: 1px solid #e4e6e8;
    border-right: 1px solid #e4e6e8;
}

Answer 2

调整padding-bottom

的tabs a

.tabs {
    border-bottom: 1px solid #e4e6e8;
    margin-top: 3rem;
    padding-bottom: 10px;
}

.tabs a {
    padding: 15px 15px 12px 15px;
}

.tabs a.current {
    background: #fff;
    color: #222;
    border-top: 3px solid #ef4123;
    border-left: 1px solid #e4e6e8;
    border-right: 1px solid #e4e6e8;
}

<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="tabs">
        <a href="" class="current">Profile</a>
        <a href="" class="">Activity</a>
      </div>
    </div>
  </div>
</div>