我使用HTML列表和CSS创建了一个水平菜单。一切工作，它应该除了当你悬停在链接。您可以看到，我为链接创建了一个粗体悬浮状态，现在菜单链接因为粗体大小的差异而移动。
我遇到了和这篇SitePoint文章一样的问题。然而，这篇文章并没有合适的解决方案。我到处寻找解决办法，但没有找到。
我肯定不是唯一一个想这么做的人。
有人有什么想法吗?
附注:我不知道菜单项中文本的宽度，所以我不能只设置li项的宽度。
.nav { margin: 0; padding: 0; }
.nav li {
list-style: none;
display: inline;
border-left: #ffffff 1px solid;
}
.nav li a:link, .nav li a:visited {
text-decoration: none;
color: #000;
margin-left: 8px;
margin-right: 5px;
}
.nav li a:hover{
text-decoration: none;
font-weight: bold;
}
.nav li.first { border: none; }
<ul class="nav">
<li class="first"><a href="#">item 0</a></li>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
这是我喜欢的解决办法。它需要一些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>
CSS3解决方案-实验性(假大胆)
想分享一个不同的解决方案，没有人在这里建议。有一个属性叫text-stroke，它会很方便。
P跨度:悬停{
-webkit-text-stroke: 1px黑色;
｝
<p>一些东西，< span>hover this，</span> it's cool</p>
在这里，我针对span标签内的文本，我们用黑色像素描边它，这将模拟该特定文本的粗体样式。
注意，这个属性还没有得到广泛的支持，到目前为止(在写这个答案的时候)，似乎只有Chrome和Firefox支持这个属性。有关浏览器支持文本笔画的更多信息，可以参考CanIUse。
只是为了分享一些额外的东西，你可以使用-webkit-text-stroke-width: 1px;如果你不打算为你的笔画设置颜色。
