Html 带有链接的li内的跨度标记正在悬停移动

我有下面的html。当我将鼠标悬停在最后一个

li

上时，应该会生成一个边框。当我将鼠标悬停在最后一个

li

上时，其他li正在移动

我已经回答了这两个问题

我无法停止移动元素

HTML:

<div class="menu_right">
  <ul class="menu">
    <li><a href="#">Text 1</a></li>
    <li><a href="#">Text 2</a></li>
    <li class="your_space"><a href="#"><span>Text3</span></a></li>
  </ul>
</div>

请查收我的账单

---

这也许是个简单的问题。但我无法找到解决方案来修复它。

在所有其他

上使用透明的
边框来修复它

ul.menu li {
  float: left;
  list-style-type: none;
  border: 2px solid transparent;
}

提琴：
请添加
边框：2倍纯色透明发送给所有用户
。右键菜单{
浮动：对；
}
菜单李{
浮动：左；
列表样式类型：无；
边框：2倍实心透明；
}
菜单李a{
文字装饰：无；
}
李，你的空间{
宽度：100px；
}
你的空间：悬停{
边框：2件纯黑；
}
li.你的空间a>span{
显示：块；
}









课程块将移动，添加2像素边框（左+右=4px）。作为替代方案，我可以提议“”

解释：
这是因为您正在悬停时设置一个
边框
属性，这会导致
li
将边框属性添加到其
高度
/
宽度

您需要在所有
li
边框上设置
transparent
边框，独立于它们的状态，因此当您将鼠标悬停在任何
li
上时，您不会添加边框，而是更改其颜色

ul.menu li {
  border: 2px solid transparent;
}

ul.menu li {
  border: 2px solid transparent;
}