底部边框仅为文本加下划线

Question

嗨,我想边框下划线看起来像这样,

所以基本上它只会强调文字,

我注意到我的网站(测试设置在这里)它扩展了如下所示的全宽,

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

我确实尝试删除nav-justified,并使用text-align:center,但它不会居中.

问题:如何使导航栏保持居中,同时边框底部仅扩展到文本的长度.

谢谢.

Answer 1

只需<a></a>使用span 将文本包装在标记内,然后将边框应用于<span>而不是<a>.所以你会得到这样的东西:

<a></a>

然后在css中这样的事情:

<span>

Answer 2

改变这个：

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

对此：

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

这将有助于在制作锚点后居中inline-block，可能还会产生其他连锁效应：

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