底部边框仅在文本下划线答案

【问题标题】：Bottom border underline the text only底部边框仅在文本下划线
【发布时间】：2014-07-29 04:38:25
【问题描述】：

您好，我希望边框底部下划线看起来像这样，

所以基本上只会给文字加下划线，

我在我的网站 (Test set up here) 上注意到它会像下面这样扩展整个宽度，

我注意到我需要减少蓝色，宽度/高度，虽然我没有设法实现这一点并保持导航栏合理，

我确实尝试删除导航对齐，并使用 text-align: center，但它不会居中。

问题：如何让导航栏居中，同时让边框底部仅扩展到文本的长度。

谢谢。

【问题讨论】：

【解决方案1】：

只需使用 span 将文本包裹在 <a></a> 标签内，并将边框应用到 <span> 而不是 <a>。所以你会得到这样的东西：

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

然后在 css 中是这样的：

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

【讨论】：

【解决方案2】：

改变这个：

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

到这里：

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

这将有助于在将锚定为inline-block 后将它们居中，可能还有其他连锁效应：

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

【讨论】：