html - css hover 字体大小变化引起的运动

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 属性。

当 hover 一个 li 时，其他 li 会轻微移动。我知道之前有人问过这个问题，但我没有找到适合我的示例的解决方案。

这是一个JSFiddle让事情变得更容易。

Answer 1

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

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

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

1. 减小字体大小
2. 增加包含元素的宽度。从而为增加字体大小和停止移动做好准备。您可以调整宽度，直到没有移动为止。
3. 删除或减少字体粗细。

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

注意:字体大小或字体粗细的变化引起移动是正常的，因为您需要空间来容纳文本大小的增加，否则它会移动。