我使用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>
如果你不想预设列表项的宽度，一个真正好的替代方法是尝试在列表项中使用单宽字体。
与单行字体不同的是，它们仍然是比例字体——但它们在不同的字体权重上占据相同的大小。不需要CSS, JS，或花哨的hack来保持大小不变。它完全融入了字体中。
我认为这是一个很好的解决这个常见问题的方法。
下面是这篇优秀文章中的一个例子，比较了比例字体IBM Plex Sans和uniwidth Recursive。
注意在比例字体(IBM Plex Sans)中，列表项如何随着粗体字体的大小变化而变化。使用单宽字体递归，项目在悬停时变成粗体，但不改变大小。
你可以尝试的免费单宽字体有:
递归
PT根用户界面
“格罗斯”界面
看台上的
还有许多非免费的选项链接到前面提到的文章中。
如果粗体字体比常规字体宽，你也可以试试负边距。(不总是)
因此，我们的想法是使用类来设置:hover状态的样式。
jQuery:
$(".nav-main .navbar-collapse > ul > li > a").hover(function() {
var originalWidth = $(this).outerWidth();
$(this).parent().addClass("hover");
$(this).css({
"margin-left": -(($(this).outerWidth() - originalWidth) / 2),
"margin-right": -(($(this).outerWidth() - originalWidth) / 2)
});
},
function() {
$(this).removeAttr("style");
$(this).parent().removeClass("hover");
});
CSS:
ul > li > a {
font-style: normal;
}
ul > li > a.hover {
font-style: 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>
