css - 在 Bootstrap 导航栏中调整链接突出显示区域的大小

Question

我使用 Twitter Bootstrap 在页面中央制作了一个导航栏。我将三个图标排列在中间，它们之间有一定距离。当我将鼠标悬停在其中一个上时，文本不在突出显示部分的中心。它看起来如下。我希望 Home 或 Tags 正好位于突出显示部分的中心。

这是我的一小段相关代码。

.navbar .nav > li > a 
{
 float: none ;
 padding: 10px 100px 8px 0px ;
 color: #777777 ;
 text-decoration: none ;
 text-shadow: 0 1px 0 #444 ;
 font-size:20px ;
}


.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover 
{
  color: silver ;
  text-decoration: none ;
  background-color:ThreeDFace  #444 ;   
}

Answer 1

希望对您有所帮助!!

更改此 CSS 样式

.navbar .nav > li > a 
{
 float: none ;
 padding: 10px 100px 8px 0px ;
 color: #777777 ;
 text-decoration: none ;
 text-shadow: 0 1px 0 #444 ;
 font-size:20px ;
}

对此

.navbar .nav > li > a 
{
 float: none ;
 width: 100px; 
 text-align: center;
 color: #777777 ;
 text-decoration: none ;
 text-shadow: 0 1px 0 #444 ;
 font-size:20px ;
}

并完成 :)