HTML/CSS在使用斜体样式悬停链接时，其他链接保持稳定

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

HTML:

JSFIDDLE：

---

感谢您的帮助

这是因为您的字体样式：斜体需要额外的空间

您可以为li添加一些固定宽度

菜单导航{ 字体系列：Segoe UI，Arial，无衬线； 字体大小：14px； 颜色：000； 列表样式：无； } 菜单导航李{ 显示：内联块； 填充：0px 10px 0px 10px； 宽度：50px； } 菜单导航李a{ 字体系列：Segoe UI，Arial，无衬线； 字体大小：14px； 颜色：000； 文字装饰：无； } 菜单导航李a：悬停{ 颜色：0a813c； 字体：斜体； }

---

这是因为你的字体风格：斜体需要额外的空间

您可以为li添加一些固定宽度

菜单导航{ 字体系列：Segoe UI，Arial，无衬线； 字体大小：14px； 颜色：000； 列表样式：无； } 菜单导航李{ 显示：内联块； 填充：0px 10px 0px 10px； 宽度：50px； } 菜单导航李a{ 字体系列：Segoe UI，Arial，无衬线； 字体大小：14px； 颜色：000； 文字装饰：无； } 菜单导航李a：悬停{ 颜色：0a813c； 字体：斜体； } }

---

}这里是另一个解决方案，您可以添加空间/nbsp；标记后，它将修复斜体悬停错误：

Html方法：

Css方法：

菜单导航李a：之后{ 内容：\0000a0； }

---

这是另一个解决方案，您可以添加空间/nbsp；标记后，它将修复斜体悬停错误：

Html方法：

Css方法：

菜单导航李a：之后{ 内容：\0000a0； }

---

如果顶部或菜单的宽度固定，问题是字体变为斜体时会占用更多的水平空间。你真的不能把它拿走。您可以将字体缩小一个像素以进行测试，但它仍然不可靠。或者尝试填充：0px 0px 0px 10px；，如果你的顶部或菜单有固定的宽度，问题是当你的字体变成斜体时，它会消耗更多的水平空间。你真的不能把它拿走。您可以将字体缩小一个像素以进行测试，但它仍然不可靠。或者尝试填充：0px 0px 0px 10px；，删除菜单nav li右侧的填充。这是因为您的字体样式：italic需要额外的空间。不正确；即使您也使用dit，因为您的字体样式：italic需要额外的空间。不正确；就连你也用过

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

#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;
}

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