悬停期间 html 对齐不正确

Question

我的网页上有一个菜单，我想在鼠标悬停的元素上添加一些强调。 在我将鼠标悬停之前，菜单看起来不错并且对齐方式看起来不错。为了添加强调，我添加了一个小箭头（或“>”符号）。问题是现在文本向右跳了 2 个字符。

我想添加“>”没有我的菜单文本向右跳转的字符。正确的行为是文本保留在 p 中 花边和箭头出现在悬停菜单项左侧 2 个空格处。

请注意，我试图改变我的对齐方式，但整个事情看起来很糟糕。只有 text-align: left 才能提供正确的对齐方式。

#leftMenu {
  position: absolute;
  top:28%;
  left:24%;
  height: 20%;
  width: 20%;
  font-weight:400
  font-size:0.5em;
}

#leftMenu a:hover:before {
  content: "> ";
}

如何添加箭头而不使文本跳到右侧？

Answer 1

只要有“>”已经存在，只是不可见。这样，它将占据菜单上的空间，因此当它出现时，任何内容都不会移动。这是一个小例子：

CSS：

#leftMenu {
  position: absolute;
  top:28%;
  left:24%;
  height: 20%;
  width: 20%;
  font-weight:400;
  font-size:0.5em;
}

.marker{
  visibility:hidden;
}

#leftMenu li:hover .marker{
  visibility:visible;
}

#leftMenu ul{
  list-style:none;
}

HTML：

<div id="leftMenu">
  <ul>
     <li><span class="marker">></span><a href="#">Link 1</a></li>
     <li><span class="marker">></span><a href="#">Link 2</a></li>
     <li><span class="marker">></span><a href="#">Link 3</a></li>
  </ul>
</div>

我不太确定菜单的确切布局，但我认为上面的内容涵盖了总体思路。

Answer 2

您可以为正常条目添加一个左填充，其宽度与箭头稍后的宽度完全相同，并在将鼠标悬停在箭头上时将其删除。

然而，这可能会很混乱，因为箭头在每个浏览器中可能不具有相同的宽度（即使使用相同的字体和字体大小）。

另一种可能性是使用定位属性将箭头移动到正确的位置。例如，如果您在其上使用 position:absolute;，它将不再移动其他东西。请注意，它将绝对定​​位在没有标准位置（静态）的下一个父级内部。