导航在粗体悬停时移动

Question

当我将导航悬停时，它会向右移动大约 5 像素。 悬停设置为字体粗细：粗体。所以我知道这是问题所在。 如果我在导航页边距下方 5px 处添加边距，则悬停实际上会变粗而不移动第一个导航链接，但是当我悬停其他导航链接时，问题又开始了。

我的悬停CSS。

#nav ul li a:hover { 
border-color:#ccc;
font-weight:bold;
margin-right:35px;

}

我创建了一个 jsFiddle 来显示问题。

http://jsfiddle.net/sM3AF/

谢谢

Answer 1

#nav ul li {
  display: inline-block;
  position: relative;
  border-right: solid 1px #e1e1e1;
  margin: 0px;
  width: 100px;
}

给每个链接一个特定的宽度可以解决这个问题...使用 % 来获得更具响应性的设计。