html - 带有链接的 li 内的 span 标签在悬停时移动

Question

我有以下 html。当我将鼠标悬停在最后一个 li 上时，应该会生成一个边框。当我将鼠标悬停在最后一个 li 上时，其他 li 正在移动。

我已经回答了这两个问题。

1. list item width height issue
2. fixed with span inside 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>

请查看我的jsfiddle .

这可能是一个简单的问题。但我无法找到修复它的解决方案。

Answer 1

使用透明 border在所有其他<li>让它变得更好。

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

fiddle :https://jsfiddle.net/8cu4bL3s/