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

Question

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

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

Answer 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();
});​

Answer 2

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