底部邊框文本加下劃線僅

Question

您好我想邊框底部下劃線的樣子的話，

所以基本上它只會強調文本，

我的網站上發現（ Test set up here）它擴展了全寬這樣的下面，

我已經注意我需要減少藍色，寬度/高度，雖然我還沒有設法實現這一點，並保持導航欄對齊，

我曾嘗試刪除導航對齊，並使用文本對齊：中心，但它不會集中。

問題：如何讓導航欄保持居中狀態，同時讓邊框底部只擴展到文本的長度。

謝謝。

Answer 1

更改此：

.nav > li > a { 
    display: block; 
} 

這樣：

.nav > li > a { 
    display: inline-block; 
} 

這將有助於使他們inline-block後中心您錨，可能有其他敲效果：

.navbar-nav.nav-justified > li{ 
    text-align:center; 
} 

Answer 2

只需使用span將<a></a>標記中的文本包起來並應用邊界到<span>而不是<a>。所以，你會得到這樣的：

<a class="menu" href="link"><span>Shop</span></a>

，然後在CSS是這樣的：

a.menu:hover span { border-bottom: 2px solid black; }