Question

我的菜单：

<div id="menu_container">
    <ul>
        <li>Portfolio</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</div><!--//menu_container-->

我的CSS：

#menu_container { text-transform: uppercase; font-size: 1.3em; font-style: bold; font-family: 'Lato', sans-serif; float: left; height: 100%; }
#menu_container ul { list-style-type: none; display: inline-block; vertical-align: middle; }
#menu_container ul li { display: inline-block; margin-left: 20px; text-decoration: none; color: #4e918b; }
#menu_container ul li:hover { font-weight: 900; }

我的字体是Google字体，因此是font-weight属性。

当hovering一个li时，其他li会略微移动。我知道之前已经问过这个问题，但是我没有找到适用于我样本的任何解决方案。

这是一个JSFiddle，可以让您的工作更轻松。

Answer 1

只需调整包含元素的宽度或减小margin-left值，如下所示。

 #menu_container ul li { 
     margin-left: 10px; 
   }

以下是该问题的其他一些解决方案

缩小字体大小
增加包含元素的宽度。从而准备好增加字体大小并停止移动。您可以调整宽度直到没有移动。
删除或减少字体重量。

See this example fix.通过减少margin-left，font-size和font-weight来实现。

注意：由于您需要空间来容纳文字大小的增加，因此字体大小或字体粗细的变化才会导致移动，这是正常的，否则它会移动。

Answer 2

这是因为元素宽度是流动的，并且由文本的宽度决定，当字体为粗体时，文本的宽度会增加。您可以通过确定各个元素的计算宽度并将其宽度设置为该值来解决问题。有点像这样：

$(document).ready(function(){
  $("#menu_container ul li").each(function(){
    var $this = $(this);
    var width = $this.width();
    $this.css("width", width);
  });
});

http://jsfiddle.net/yvxb1os1/20/

或者，您可以使用较暗的字体颜色代替粗体文字。

css悬停时字体大小变化引起的移动

2 个答案: