我使用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>
我可以给你两种建议
第一个选项:是将每个列表项的宽度设置为%
这里有一个简单的例子
<ul>
<li><a href="#">First Item</a></li>
<li><a href="#">Second Item</a></li>
<li><a href="#">Third Item</a></li>
<li><a href="#">Fourth Item</a></li>
</ul>
li {
list-style-type: none;
display: inline-block;
width: 24%;
}
a {
text-decoration: none;
color: #333;
font-size: 1.4em;
background: #A5C77F;
display: block;
padding: 10px 15px;
margin: 10px 0;
border-right: 1px solid whitesmoke;
transition: font-weight .3s;
}
a:hover {
font-weight: bold;
}
第二种选择:在活动元素上使用文本阴影
text-shadow: 0 0 .65px #333, 0 0 .65px #333;
但我建议使用第一个选项，即为每个元素指定一个百分比的宽度，因为文本阴影并不总是在移动浏览器中工作
我遇到过和你类似的问题。我想让我的链接变得粗体时，你悬停在他们，但不仅在菜单，而且在文本。正如你可以猜到的，这将是一个真正的苦差事，找出所有不同的宽度。解决方法很简单:
创建一个框，其中包含粗体的链接文本，但颜色像你的背景，但你的真实链接在上面。下面是我个人主页上的一个例子:
CSS:
.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }
当然，你需要将#FFFFE0替换为页面的背景色。z索引似乎没有必要，但我还是放了它们(因为“hypo”元素将出现在HTML-Code中的“hyper”元素之后)。现在，在你的页面上放一个链接，包括以下内容:
HTML:
You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>
第二个“这里”将是不可见的，隐藏在你的链接下面。因为这是一个静态的盒子
你的粗体链接文本，你的其余文本不会再移动，因为它已经移动之前，你悬停在链接。
我结合了上面的一些技术来提供一些东西，如果关闭js，它不会完全糟糕，如果使用jQuery，效果会更好。现在浏览器对亚像素字母间距的支持正在改进，使用它真的很好。
jQuery(document).ready(function($) {
$('.nav a').each(function(){
$(this).clone().addClass('hoverclone').fadeTo(0,0).insertAfter($(this));
var regular = $(this);
var hoverclone = $(this).next('.hoverclone');
regular.parent().not('.current_page_item').hover(function(){
regular.filter(':not(:animated)').fadeTo(200,0);
hoverclone.fadeTo(150,1);
}, function(){
regular.fadeTo(150,1);
hoverclone.filter(':not(:animated)').fadeTo(250,0);
});
});
});
ul {
font:normal 20px Arial;
text-align: center;
}
li, a {
display:inline-block;
text-align:center;
}
a {
padding:4px 8px;
text-decoration:none;
color: #555;
}
.nav a {
letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
font-weight: bold;
letter-spacing: 0px;
}
.nav li {
position: relative;
}
.nav a.hoverclone {
position: absolute;
top:0;
left: 0;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="current_page_item"><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</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;如果你不打算为你的笔画设置颜色。
