html - 导航在粗体悬停时移动

Question

当我将导航悬停时，它会向右移动大约 5 px。悬停设置为字体粗细：粗体。所以我知道这是问题所在。如果我在导航的边距下方添加一个边距右 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;
}

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