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

【问题标题】：span tag inside li with link is moving on hover带有链接的 li 内的 span 标签在悬停时移动
【发布时间】：2016-03-29 23:01:46
【问题描述】：

我有以下 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>

请查看我的jsfiddle。

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

【问题讨论】：

标签： html css html-lists

【解决方案1】：

在所有其他<li> 上使用透明的border 以使其良好。

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

小提琴：https://jsfiddle.net/8cu4bL3s/

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：