如何避免悬停在菜单项上影响右侧的菜单项答案

【问题标题】：How to avoid an hover on a menu item to affect the menu items on the right如何避免悬停在菜单项上影响右侧的菜单项
【发布时间】：2012-11-28 11:46:15
【问题描述】：

我有一个非常简单的水平菜单。我想在悬停时字体变粗。问题是当我悬停时，文本变为粗体，但右侧的所有菜单项都向右切换几个像素。希望有人可以帮助我了解如何避免这种情况。谢谢。

FIDDLE : : http://jsfiddle.net/QKBUS/

HTML：

<div id="header">
  <ul id="menu">
    <li class="bouton_gauche"><a href="">agenda</a></li>
    <li class="bouton_gauche"><a href="">messagerie</a></li>
    <li class="bouton_gauche"><a href="">communautée</a></li>
    <li class="bouton_gauche"><a id="btn-deconnexion" href="">déconnexion</a></li>
    <li class="bouton_droite"><a href="">[logo]</a></li>
  </ul>
</div>

CSS：

ul#menu { 
list-style-type : none; 
}

li.bouton_gauche {
float : left;
margin-right:15px;
}

li.bouton_droite {
float : right;
}

ul#menu a{
text-decoration: none;
}

ul#menu a:hover{
font-weight: bold;
}

【问题讨论】：

嗯，每个菜单项的宽度来自于里面文字的宽度，加粗的时候文字变宽了。
你好。问题是我不能有标准宽度，因为每个文本都有不同的长度。它看起来很奇怪......
为什么不给每个 li.bouton_gauche 添加适当的宽度，这样它就可以包含粗体文本？
无论你做什么，它看起来都很奇怪。例如，这是一个 JavaScript 修复：jsfiddle.net/thirtydot/QKBUS/15。每个菜单项之间的宽度不同，看起来很糟糕。 text-align: center 稍微好一点：jsfiddle.net/thirtydot/QKBUS/18
泰。如果你把它作为答案，我会接受。正是我想要的（第二把小提琴）

标签： css hover

【解决方案1】：

如果你坚持...http://jsfiddle.net/thirtydot/QKBUS/18/

将text-align: center 添加到ul#menu，然后使用这个JavaScript（使用jQuery）：

$('#header li a').each(function() {
    var temp = $(this).hide().clone().appendTo($(this).parent()).css('font-weight', 'bold').show();
    $(this).show().parent().width(temp.width());
    temp.remove();
});

【讨论】：

【解决方案2】：

通过为列表项提供固定宽度可以轻松避免上述情况，但这会使第一个与其他项看起来太不一样，因此您必须为第一个使用不同的宽度。

【讨论】：

关于太离谱的部分太真实了。那么如果它是一个动态菜单，可以出现长短菜单项名称呢？最好选择不限于静态内容的东西。但是，是的，您的观察正是这件事的意义所在。