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

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 ;
}

并做了 ：）