我使用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>
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;如果你不打算为你的笔画设置颜色。
我真的无法忍受有人告诉你不要那样做，而其实有一个简单的解决方法。我不确定li元素，但我刚刚修复了相同的问题。我有一个由div标签组成的菜单。
只需将div标签设置为“display: inline-block”。内联，所以他们坐在彼此和块，你可以设置宽度。只需要设置足够宽的宽度来容纳粗体文本，并使文本居中对齐。
(注意:它似乎剥离了我的html[下面]，但每个菜单项都有一个div标签围绕它与corrasponding ID和类名searchbar_category。ie: <div id="ROS_SearchSermons" class="SearchBar_Category">
超文本标记语言
(我有锚标签包装每个菜单项，但我不能提交他们作为一个新用户)
<div id="ROS_SearchSermons" class="SearchBar_Cateogry bold">Sermons</div>|
<div id="ROS_SearchIllustrations" class="SearchBar_Cateogry">Illustrations</div>|
<div id="ROS_SearchVideos" class="SearchBar_Cateogry">Videos</div>|
<div id="ROS_SearchPowerPoints" class="SearchBar_Cateogry">PowerPoints</div>|
<div id="ROS_SearchScripture" class="SearchBar_Cateogry">Scripture</div>|
CSS:
#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }
.SearchBar_Cateogry
{
display: inline-block;
text-align:center;
}
我可以给你两种建议
第一个选项:是将每个列表项的宽度设置为%
这里有一个简单的例子
<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;
但我建议使用第一个选项，即为每个元素指定一个百分比的宽度，因为文本阴影并不总是在移动浏览器中工作
