悬停时加粗时内联元素移动答案

【问题标题】：Inline elements shifting when made bold on hover悬停时加粗时内联元素移动
【发布时间】：2010-10-08 01:19:48
【问题描述】：

我使用 HTML 列表和 CSS 创建了一个水平菜单。除非您将鼠标悬停在链接上，否则一切正常。你看，我为链接创建了一个粗体悬停状态，现在菜单链接由于粗体大小的不同而发生了变化。

我遇到了与this SitePoint post 相同的问题。但是，该帖子没有适当的解决方案。我到处寻找解决方案，但找不到。当然，我不可能是唯一一个尝试这样做的人。

有人有什么想法吗？

P.S：我不知道菜单项中文本的宽度，所以我不能只设置 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>

【问题讨论】：

标签： html css hover text-size

【解决方案1】：

预设宽度，使用与父悬停样式具有相同内容和样式的不可见伪元素。使用数据属性，例如title，作为内容的来源。

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

【讨论】：

完美！即使不使用 ul，它也适用于，但我会使用另一个属性，如 data-text 而不是标题。
此解决方案有效，但最好将margin-top: -1px 添加到:after 以避免创建1px 高度的空间。
这是一个很好的解决方案！出于好奇，“a:after”和“a::after”之间的结果有区别吗？
@mattroberts33 : vs :: "每个支持双冒号:: CSS3语法的浏览器也只支持:语法，但是IE 8只支持单冒号，所以目前，建议仅使用单冒号以获得最佳浏览器支持。” css-tricks.com/almanac/selectors/a/after-and-before
@HughHughTeotl 使用 font-size:0 表示 UL 或 a::after，换句话说 - 重置所有填充/边距/行高/字体大小等。

【解决方案2】：

一个妥协的解决方案是用文本阴影假冒粗体，例如：

文本阴影：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>

传递给text-shadow 的blur-radius 的值非常低，会使模糊效果不那么明显。

一般来说，您重复text-shadow 越多，您的文字就会越粗，但同时会失去字母的原始形状。

我应该警告你，将blur-radius 设置为分数不会在所有浏览器中呈现相同的！例如，Safari 需要更大的值才能以与 Chrome 相同的方式呈现它。

【讨论】：

这比其他浏览器计算的粗体解决方案更难看，应该避免

【解决方案3】：

另一个想法是使用letter-spacing

li, a { display: inline-block; }
a {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.235px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}

<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

【讨论】：

这是否适用于所有浏览器，尤其是 IE10+ 和 Safari？
我最喜欢的一个:)
@UmairHafeez 是的，所有现代浏览器都期待opera mini caniuse.com/#feat=css-letter-spacing
你怎么知道 0.235px 是完美的数量？有什么公式可以计算出需要多少间距？
我最喜欢这个解决方案，但第二个@Cold_Class 问题。 0.235px 在我的情况下也有效（16px Helvetica Neue），但似乎它可能取决于字体。

【解决方案4】：

如果你不能设置宽度，那么这意味着宽度会随着文本变粗而改变。没有办法避免这种情况，除非通过修改每个状态的填充/边距等妥协。

【讨论】：

+1 正如安德鲁所说，粗体文本更宽。生活的事实。甚至修复菜单项的宽度以避免这种情况或忍受它（重新计算填充不精确且容易出错）。
是的，出于这个原因，我倾向于避免使用粗体鼠标悬停效果。
“没有办法避免这种情况”。请参阅下面 350D 的答案。
另请注意，安德鲁的答案是在添加 350D 的解决方案之前 4 年发布的。以 attr() 函数作为内容值的伪元素在当时是绝对不可能的:) 哦，在 Stack Overflow 时间过得真快。然而，社区克服了它，它是公认的答案和最多的赞成票，所以我很高兴！

【解决方案5】：

一个 jquery 中的一行：

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

编辑： 虽然这可以带来解决方案，但应该提到它不能与原始帖子中的代码一起使用。 "display:inline" 必须替换为浮动参数才能使宽度设置生效并且水平菜单按预期工作。

【讨论】：

您可以对页面中的所有链接执行此操作吗？也就是说，用a 替换ul.nav li a 有效吗？
这个问题没有用JS标记，更不用说jQuery了。请不要发布不必要的解决方案。
@Zach Saucier 在某些情况下，一些开发人员可能更喜欢 JS 解决方案，因为它们通常更短。您可以将 JS 标签添加到问题中，让每个人决定他们认为哪个解决方案更有用，而不是对每个使用 JS 发布内容的人投反对票。
@Zach Saucier CSS 解决方案在某些情况下可能不实用。有时你可能需要一个不同的 title 属性，或者已经用完了 ::after 伪元素，或者你个人认为在给定的情况下使用 JS 中的一行到几行 CSS 更实用。在大多数情况下，我确实认为 CSS 答案更好，但将 JS 答案作为附加选项很有用。
这是我能找到的唯一解决方案，既能解决问题，又能保持元素之间的均匀间距。

【解决方案6】：

CSS3 解决方案 - 实验性

（假粗体）

想分享一种不同的解决方案，这里没有人建议。有一个名为 text-stroke 的属性可以很方便地完成此操作。

p span:hover {
  -webkit-text-stroke: 1px black;
}

&lt;p&gt;Some stuff, &lt;span&gt;hover this,&lt;/span&gt; it's cool&lt;/p&gt;

在这里，我的目标是span 标签内的文本，我们用black 对其进行描边，这将模拟该特定文本的bold 样式。

请注意，此属性并未得到广泛支持，截至目前（在撰写此答案时），似乎只有 Chrome 和 Firefox 支持此属性。更多浏览器支持text-stroke，可以参考CanIUse。

只是为了分享一些额外的东西，如果你不想为你的笔划设置一个color，你可以使用-webkit-text-stroke-width: 1px;。

【讨论】：

这太棒了
很棒的提示。不幸的是，4 年后它仍然不是标准的。

【解决方案7】：

你可以使用类似的东西

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

然后在您的 CSS 中将 span 内容设置为粗体并将其隐藏为可见性：隐藏，以便它保持其尺寸。然后您可以调整以下元素的边距以使其适合。

我不确定这种方法是否对 SEO 友好。

【讨论】：

这也对开发人员/维护不友好

【解决方案8】：

我刚刚用“影子”解决方案解决了这个问题。这似乎是最简单有效的。

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

不需要重复阴影三次（结果对我来说是一样的）。

【讨论】：

这比其他浏览器计算的粗体解决方案更难看，应该避免

【解决方案9】：

我遇到了与您类似的问题。当您将鼠标悬停在链接上时，我希望我的链接变得粗体，但不仅在菜单中，而且在文本中。正如您猜测的那样，弄清楚所有不同的宽度将是一件真正的苦差事。解决方法很简单：

创建一个框，其中包含粗体的链接文本，但颜色与您的背景相似，但在其上方是您的真实链接。这是我页面中的一个示例：

CSS：

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

当然，您需要将#FFFFE0 替换为页面的背景颜色。 z 索引似乎不是必需的，但我还是把它们放在了（因为“hypo”元素将出现在 HTML 代码中的“hyper”元素之后）。现在，要在您的页面上放置一个链接，请包括以下内容：

HTML：

You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

第二个“此处”将不可见并隐藏在您的链接下方。因为这是一个静态盒子您的链接文本以粗体显示，其余文本将不再移动，因为它在您将鼠标悬停在链接上之前已经移动。

希望我能提供帮助:)。

久违了

【讨论】：

【解决方案10】：

我使用 text-shadow 解决方案，就像这里提到的其他人一样：

text-shadow: 0 0 0.01px;

不同的是我没有指定阴影颜色，所以这个方案对所有字体颜色都是通用的。

【讨论】：

【解决方案11】：

如果您不想预设列表项的宽度，一个非常好的选择是尝试在列表项中使用 uniwidth 字体。

与等宽字体不同，它们仍然是成比例的字体——但它们在不同的字体粗细上占据相同的大小。 无需 CSS、JS 或花哨的 hack 即可保持大小不变。它已融入字体。

我认为这是解决这个常见问题的一个非常优雅的解决方案。

这是来自this excellent article 的示例，比较比例字体 IBM Plex Sans 和 uniwidth Recursive。

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

您可以尝试的免费等宽字体有：

通过上述文章也链接了许多非免费选项。

【讨论】：

@Jean-François Fabre 我觉得解决这个问题的等宽字体方法很优雅，并且没有在答案中体现出来。我的解决方案已经过编辑，以更适合该问题。

【解决方案12】：

您可以使用“margin”属性：

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

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

只需确保左右边距足够大，以便多余的空间可以包含粗体文本。对于长词，您可以选择不同的边距。这只是另一种解决方法，但可以为我完成这项工作。

【讨论】：

我使用了类似的解决方案，但对我来说 - 只是将 'margin:0 -2px' 添加到悬停样式（而不是在正常样式中添加任何其他内容） - 效果很好。
如果您的字符串长度存在任何可变性，这将不起作用

【解决方案13】：

我喜欢使用 text-shadow 代替。尤其是因为您可以使用过渡来为文本阴影设置动画。

你真正需要的是：

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

要获得完整的导航，请查看这个 jsfiddle： https://jsfiddle.net/831r3yrb/

浏览器支持和更多关于文本阴影的信息： http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

【讨论】：

这与使用过渡效果很好。很好的替代解决方案。

【解决方案14】：

另一种方法是通过文本阴影“模拟”粗体文本。这有一个好处（/malus，取决于你的情况）也可以在字体图标上工作。

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

有点 hacky，虽然它可以让你避免重复文本（如果文本很多，这很有用，就像我的例子一样）。

【讨论】：

进一步破解：text-shadow: 0 0 1px, 0 1px 0;

【解决方案15】：

我建议不要在悬停时切换字体（°）。在这种情况下，它只是菜单项移动了一点，但我已经看到了整个段落被重新格式化的情况，因为加宽会导致额外的自动换行。当您唯一要做的就是移动光标时，您不希望看到这种情况发生；如果你什么都不做，页面布局不应该改变。

在正常和斜体之间切换时也会发生这种转变。如果文本下方有空间，我会尝试更改颜色或切换下划线。（下划线应远离底部边框）

如果我为我的表单设计课使用切换字体，我会被嘘的 :-)

(°) 字体这个词经常被误用。 “Verdana”是一种字体，“Verdana normal”和“Verdana bold”是同一字体的不同字体。

【讨论】：

【解决方案16】：

ul {
  list-style-marker: none;
  padding: 0;
}

li {
  display: inline-block;
}

li + li {
  margin-left: 1em;
}

a {
  display: block;
  position: relative;
  text-align: center;
}

a:before, a:after {
  content: attr(aria-label);
  text-decoration: inherit;
}

a:before {
  font-weight: bold;
  visibility: hidden;
}

a:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

a:hover:before {
  visibility: visible;
}

a:hover:after {
  display: none;
}

<ul>
  <li>
    <a href="" aria-label="Long-long-long"></a>
  </li><li>
    <a href="" aria-label="or"></a>
  </li><li>
    <a href="" aria-label="Short"></a>
  </li><li>
    <a href="" aria-label="Links"></a>
  </li><li>
    <a href="" aria-label="Here"></a>
  </li>
</ul>

【讨论】：

【解决方案17】：

将letter-spacing 与text-shadow 一起使用：

a {
  letter-spacing: .1em;
}

a:hover {
  text-shadow: 0 0 .9px #color, 0 0 .9px #color, 0 0 .9px #color;
}

【讨论】：

【解决方案18】：

我用几行 javascript 解决了这个问题。

$('a.menu_item').each(function() {
    let width = $(this).width();
    $(this).css('width',width + 'px');
});

【讨论】：

【解决方案19】：

在这里看到很多很棒但非常复杂的答案。真的不需要重置宽度，添加隐藏元素，为不同的布局声明重新设计元素等。最简单的解决方案是通过将悬停声明中的字体大小调整为稍微增加粗体文本来解决大小的增加较小的尺寸。例如 font-size: .985em 来自正常的 1em 声明，它允许文本在悬停时变为粗体，但也保持原始大小外观。

【讨论】：

【解决方案20】：

这是我更喜欢的解决方案。它需要一点 JS，但您不需要完全一样的 title 属性，并且您的 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>

【讨论】：

【解决方案21】：

这个呢？一个 javascript - CSS3 免费解决方案。

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>

【讨论】：

这是相当多的额外标记和 CSS 来解决问题......它不是开发人员、SEO 或未来友好的

【解决方案22】：

不是很优雅的解决方案，但“有效”：

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

【讨论】：

【解决方案23】：

我结合了上面的一堆技术来提供一些在关闭 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>

【讨论】：

【解决方案24】：

最好使用 a::before 而不是 a::after 像这样：

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.breadcrumb li, 
.breadcrumb li a {
  display: inline-block;
}

.breadcrumb li:not(:last-child)::after {
  content: '>'; /* or anything else */
  display: inline-block;
}

.breadcrumb a:hover {
  font-weight: bold;
}

.breadcrumb a::before {
  display: block;
  content: attr(data-label);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

<ul class="breadcrumb">
  <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
  <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
  <li><a data-label="three" href="#">three</a></li>
</ul>

更多详情：https://jsfiddle.net/r25foavy/

【讨论】：

您能否说明为什么a::before 比a::after 更好？这似乎是您答案的关键部分，但在这种情况下，为什么一个比另一个更可取并不明显。

【解决方案25】：

我修复了鼠标悬停成功时的菜单。它支持响应式，这是我的代码：

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);

【讨论】：

【解决方案26】：

如果您不反对使用 Javascript，您可以在页面显示后设置适当的宽度。这是我的做法（使用原型）：

$$('ul.nav li').each(this.setProperWidth);

setProperWidth: function(li)
{
  // Prototype's getWidth() includes padding, so we 
  // have to subtract that when we set the width.
  var paddingLeft = li.getStyle('padding-left'),
      paddingRight = li.getStyle('padding-right');

  // Cut out the 'px' at the end of each padding
  paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
  paddingRight = paddingRight.substring(0,paddingRight.length-2);

  // Make the li bold, set the width, then unbold it
  li.setStyle({ fontWeight: 'bold' });
  li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
  li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}

【讨论】：

Javascript 没有在问题中标记，更不用说 jQuery。请使用问题中标记的语言继续回答

【解决方案27】：

试试这个：

.nav {
  font-family: monospace;
}

【讨论】：

这会有什么改变？
@MiXT4PE 对于等宽，字符在常规或粗体中具有相同的大小。大小不会改变
改变字体系列不是解决办法
更改字体系列以修复 UI 错误并不是解决方案，因为字体系列在大多数情况下是所有品牌排版的根源。
排版是 UI 设计的很大一部分，为品牌设计的字体应该考虑到它们在 UI 中的使用。 PT Sans 和 Clear Sans 是两种字形间距在粗细上相似的字体。不幸的是，确实很少有（非等宽）字体具有此属性，并且实现该问题的其他答案之一可能比支付字体开发费用更便宜。但是，随着可变字体可用性的提高，这种情况将会改变。请参阅 v-fonts.com 了解可变宽度 + 粗细的字体。

【解决方案28】：

当有一个简单的问题解决方案时，有人告诉你不要那样做，我真的无法忍受。我不确定 li 元素，但我刚刚解决了同样的问题。我有一个由 div 标签组成的菜单。

只需将 div 标签设置为“display: inline-block”。内联，因此它们彼此相邻并阻挡您可以设置宽度。只需将宽度设置为足以容纳粗体文本并对齐文本中心即可。

（注意：这似乎是在剥离我的 html [下面]，但每个菜单项都有一个 div 标签，其中包含相应的 ID 和类名 SearchBar_Cateogory。即：<div id="ROS_SearchSermons" class="SearchBar_Category">

HTML （我在每个菜单项周围都有锚标记，但我无法将它们作为新用户提交）

<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;
}

【讨论】：

这是使用固定宽度，就像指定的 OP 是 NOT 的情况一样。因此，此答案不能回答所提出的问题

【解决方案29】：

如果粗体文本比常规文本更宽，您也可以尝试负边距。（不总是）所以想法是使用类来设置 :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;
}

希望能帮到你！

【讨论】：

请不要以标记语言以外的语言发布答案。这并不能回答所提出的问题