css - 选项卡中的边框未正确对齐

Question

当前时我有标签 它添加了顶部边框、左侧边框和右侧边框。

显示时的左边框和右边框似乎卡在 .tabs 边框底部。

Question how can I make sure that tab is has class .current the border-left and border-right will be even with the .tabs border bottom.

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 上的底部填充>，我会使用 translateY() 将元素向下推 1px，使其与 .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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<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>