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

Question

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

小提琴：：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

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