Seeing a lot of great but very involved answers here. There's really not a need for resetting widths, adding hidden elements, reworking elements for different layout declarations, etc. The simplest solution is just to account for the increase in size from the bold text by adjusting the font size in the hover declaration to a slightly smaller size. Like for example font-size: .985em from the normal 1em declaration, which allows the text to bold when hovered but also maintain the original size appearance.

你可以使用"margin"属性:

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

只要确保左右边距足够大，以便额外的空间可以包含粗体文本。对于较长的单词，可以选择不同的页边距。 这只是另一种解决方法，但为我做了工作。

如果您不能设置宽度，那么这意味着宽度将随着文本变得粗体而改变。除了修改每个状态的填充/边距之类的妥协，没有办法避免这种情况。

这是我喜欢的解决办法。它需要一些JS，但你不需要你的标题属性完全相同，你的CSS可以保持非常简单。

$('ul a').each(function() { $(this).css({ 'padding-left': 0, 'padding-right': 0, 'width': $(this).outerWidth() }); }); li, a { display: inline-block; } a { padding-left: 10px; padding-right: 10px; text-align: center; /* optional, smoother */ } a:hover { font-weight: bold; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul>

我喜欢用文本阴影代替。特别是因为您可以使用过渡来动画文本阴影。

你真正需要的是:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

要获得完整的导航，请查看这个jsfiddle: https://jsfiddle.net/831r3yrb/

浏览器支持和更多关于文本阴影的信息: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Seeing a lot of great but very involved answers here. There's really not a need for resetting widths, adding hidden elements, reworking elements for different layout declarations, etc. The simplest solution is just to account for the increase in size from the bold text by adjusting the font size in the hover declaration to a slightly smaller size. Like for example font-size: .985em from the normal 1em declaration, which allows the text to bold when hovered but also maintain the original size appearance.