邊框沒有排列正確的標籤

我有當前標籤當前它添加了邊框頂部，邊框左邊界和右邊界。邊框沒有排列正確的標籤

顯示的邊框左邊界和右邊界似乎超過.tabs邊框底部。

問題我怎麼能確保標籤是具有類.current的左邊框和右邊框甚至會與.tabs邊境底部。

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>

來源

2017-03-01 user4419336

設置鏈接inline-block，使他們的任何垂直填充/保證金/邊框將正常影響其他元素在佈局中，刪除012上的底部填充，我會用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>

來源

2017-03-01 04:12:00

謝謝你的工作。 – user4419336

@ wolfgang1983不客氣。 –

邊界調整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>

來源

2017-03-01 04:13:21

邊框沒有排列正確的標籤

回答

相關問題