我真的无法忍受有人告诉你不要那样做，而其实有一个简单的解决方法。我不确定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;
}

如果你不想预设列表项的宽度，一个真正好的替代方法是尝试在列表项中使用单宽字体。

与单行字体不同的是，它们仍然是比例字体——但它们在不同的字体权重上占据相同的大小。不需要CSS, JS，或花哨的hack来保持大小不变。它完全融入了字体中。

我认为这是一个很好的解决这个常见问题的方法。

下面是这篇优秀文章中的一个例子，比较了比例字体IBM Plex Sans和uniwidth Recursive。

注意在比例字体(IBM Plex Sans)中，列表项如何随着粗体字体的大小变化而变化。使用单宽字体递归，项目在悬停时变成粗体，但不改变大小。

你可以尝试的免费单宽字体有:

递归 PT根用户界面 “格罗斯”界面 看台上的

还有许多非免费的选项链接到前面提到的文章中。

折衷的解决方案是使用文本阴影来伪装粗体，例如:

文字阴影:0 0 0.01px黑色;

为了更好地进行比较，我创建了以下示例:

a, li { color: black; text-decoration: none; font: 18px sans-serif; letter-spacing: 0.03em; } li { display: inline-block; margin-right: 20px; color: gray; font-size: 0.7em; } .bold-x1 a.hover:hover, .bold-x1 a:not(.hover) { text-shadow: 0 0 .01px black; } .bold-x2 a.hover:hover, .bold-x2 a:not(.hover){ text-shadow: 0 0 .01px black, 0 0 .01px black; } .bold-x3 a.hover:hover, .bold-x3 a:not(.hover){ text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black; } .bold-native a.hover:hover, .bold-native a:not(.hover){ font-weight: bold; } .bold-native li:nth-child(4), .bold-native li:nth-child(5){ margin-left: -6px; letter-spacing: 0.01em; } <ul class="bold-x1"> <li><a class="hover" href="#">Home</a></li> <li><a class="hover" href="#">Products</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li>Bold (text-shadow x1)</li> </ul> <ul class="bold-x2"> <li><a class="hover" href="#">Home</a></li> <li><a class="hover" href="#">Products</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li>Extra Bold (text-shadow x2)</li> </ul> <ul class="bold-native"> <li><a class="hover" href="#">Home</a></li> <li><a class="hover" href="#">Products</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li>Bold (native)</li> </ul> <ul class="bold-x3"> <li><a class="hover" href="#">Home</a></li> <li><a class="hover" href="#">Products</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li>Black (text-shadow x3)</li> </ul>

传递给文本阴影非常低的模糊半径值将使模糊效果不那么明显。

一般来说，你重复的文字阴影越多，你的文字就会变得越粗壮，但同时也会失去字母的原始形状。

我应该警告你，将模糊半径设置为分数并不会在所有浏览器中呈现相同的效果!例如，Safari需要更大的值来呈现它，就像Chrome一样。

jquery中的一行:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

编辑: 虽然这可以带来解决方案，但应该提到的是，它不能与原始文章中的代码一起工作。"display:inline"必须替换为浮动参数，以便宽度设置有效，水平菜单可以正常工作。

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

你可以使用"margin"属性:

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

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

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