HTML / CSS当悬停链接样式斜体其他链接保持稳定答案

【问题标题】：HTML/CSS when hover link with style italic other links stay stableHTML / CSS当悬停链接样式斜体其他链接保持稳定
【发布时间】：2013-03-27 09:39:30
【问题描述】：

当我悬停菜单链接时，我遇到了一个小问题，其他链接向侧面移动，但我需要我的其他链接保持稳定。我该如何解决？

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/

感谢您的帮助

【问题讨论】：

如果您的#top 或#menu 具有固定宽度，问题是当您的字体变为斜体时会占用更多水平空间。你不能真的把 CSS 去掉。您可以将字体缩小一个像素以进行测试，但这仍然不可靠。或者试试padding: 0px 0px 0px 10px;，你可以去掉#menu #nav li右边的填充。

标签： html css hyperlink hover italic

【解决方案1】：

这是因为您的font-style:italic 占用了额外的空间。

您可以在li 中添加一些固定的width。

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

【讨论】：

这是因为你的 font-style:italic 占用了额外的空间。不对;连你也用过

【解决方案2】：

这里还有一个解决办法，可以加空格/nbsp；在A标签之后，它会修复斜体悬停错误：

HTML方法：

<a href="#">Link&nbsp;</a>
CSS方法：

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

【讨论】：

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

}

【讨论】：