Html 导航以粗体悬停移动

当我悬停导航时，它会向右移动大约5像素。 悬停设置为字体粗体。所以我知道这是问题的关键。 如果我在导航栏边距的正下方5px处添加边距，悬停实际上会变粗，而不移动第一个导航链接，但当我悬停其他链接时，问题再次出现

我的悬停css

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

}

我已经创建了一个JSFIDLE来显示这个问题

谢谢

给每个链接一定的宽度将解决这个问题。。。使用%进行响应性更强的设计

---

给每个链接一定的宽度将解决这个问题。。。使用%进行更具响应性的设计。

您在悬停时使用粗体字有什么问题或困惑？您在悬停时使用粗体字有什么问题或困惑？

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