悬停链接时带有斜体的HTML / CSS斜体其他链接保持稳定

Question

我有一个小问题，当我悬停菜单链接其他链接转移到侧面，但我需要我的其他链接将保持稳定。我该如何解决这个问题？

HTML：

<div id="top">
    <a href="index.php?id=pagrindinis"><div id="logo"></div></a>
    <div id="menu">
        <ul id="nav">
            <li><a href="index.php">Pagrindinis</a></li>
            <li><a href="#">Taisyklės</a></li>
            <li><a href="#">Pamokos</a></li>
            <li><a href="#">Kontaktai</a></li>
            <li><a href="#">Facebook</a></li>
        </ul>
    </div>

CSS：

#menu #nav {
    font-family: Segoe UI, Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    list-style:none;
}

#menu #nav li {
    display: inline-block;
    padding: 0px 10px 0px 10px;
}

#menu #nav li a {
    font-family: Segoe UI, Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
}

#menu #nav li a:hover {
    color: #0a813c;
    font-style: italic;
}

的jsfiddle：http://jsfiddle.net/nJgyn/1/

感谢帮助

Answer 1

这是因为你的font-style:italic需要额外的空间。

你可以添加一些固定的width到li。

#menu #nav {
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  list-style: none;
}

#menu #nav li {
  display: inline-block;
  padding: 0px 10px 0px 10px;
  width: 50px;
}

#menu #nav li a {
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  text-decoration: none;
}

#menu #nav li a:hover {
  color: #0a813c;
  font-style: italic;
}

<div id="menu">
  <ul id="nav">
    <li><a href="index.php">Pagrindinis</a></li>
    <li><a href="#">Taisyklės</a></li>
    <li><a href="#">Pamokos</a></li>
    <li><a href="#">Kontaktai</a></li>
    <li><a href="#">Facebook</a></li>
  </ul>
</div>

JSfiddle。

Answer 2

这是另一种解决方案，可以添加空间/ nbsp;在A标签之后，它将修复斜体悬停错误：

1. Html方法： <a href="#">Link&nbsp;</a>
2. Css方法：

   #menu #nav li a:after {
   content: "\0000a0";
   }

Answer 3

#menu #nav li {
display: inline-block;
width: 100px;
text-align: center;
}

#menu #nav {
font-family: Segoe UI, Arial, sans-serif;
font-size: 14px;
color: white;
list-style: none;
padding: 0px;
display: table;

}