境界線がタブ内に正しく整列していない

Question

現在のタブがあります。境界線の上端、境界線の左端および境界線の右端が追加されます。

表示されている境界線の左端と境界線は、.tabs border-bottomをオーバーしているようです。

質問は、どのように私はタブがあることを確認することができますクラス.currentを持って ボーダー、左との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へのリンクを設定しますレイアウトで、012の下のパッドを削除します、それが.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>

Answer 2

上の境界線と重なるので、私は調整1pxのダウン要素をプッシュするtranslateY()を使用する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>