带有 link 的 li 内的 span 标签在悬停时移动

Question

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

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

list item width height issue
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

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

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

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

Answer 2

请将border: 2px solid transparent;添加到所有li

.menu_right {
  float: right;
}
ul.menu li {
  float: left;
  list-style-type: none;
  border: 2px solid transparent;
}
ul.menu li a {
  text-decoration: none;
}
li.your_space {
  width: 100px;
}
li.your_space:hover {
  border: 2px solid black;
}
li.your_space a>span {
  display: block;
}

<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>

另一个解决方案

将 padding:2px; 添加到所有 li 并在悬停时删除悬停 li 的填充并为其添加边框添加此 CSS

.menu_right{
  float:right;
}
ul.menu li{
  float: left;
  list-style-type: none;
  padding:2px;
}
ul.menu li a{
  text-decoration:none;
}
li.your_space{
  width:100px;
}
li.your_space:hover{
  border: 2px solid black;
  padding:0;
}
li.your_space a>span{
  display:block;
}

Answer 3

课程块会移动，您添加一个 2 像素的边框（左 + 右 = 4 像素）。作为替代方案，我可以建议“outline”

li.your_space:hover{
  outline: 2px solid black;
}

Answer 4

解释：这是因为您在悬停时设置 border 属性，这会导致 li 将边框属性添加到其 height / width .

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

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

带有 link 的 li 内的 span 标签在悬停时移动

span tag inside li with link is moving on hover

html

css

html-lists