Question

我有一个简单的导航，并显示活动的点击标签粗体。

<ul class="nav navbar-nav>
    <li><a href="#">Tab1</a></li>
    <li><a href="#">Tab2</a></li>
    <li><a href="#">Tab3</a></li>
</ul>

点击的标签将始终显示class="active"。

li.active a {
    font-weight: bold;
}

问题：由于粗体字体，当我点击它时，tabtext的大小会稍微改变一点，导致下面的标签移动1-2px。

问题：我该如何防止这种情况？

当我使用font-weight: normal时，这些动作就消失了。所以它们肯定是由粗体字体引起的。但是，我如何强制未点击的标签文本不移动？

Answer 1

添加bold会改变渲染文本所需的像素数量，即粗体文本比普通文本更大 - 即使font-size不受影响。这种变化将推动周围的元素。

您可以不使用粗体或有多种方法可以通过“保留空间”来阻止文本转换，例如