当li:active时，内联列表项的位置发生变化

Question

我有一个水平导航栏，当选择其中一个链接时，该链接将变为粗体。然而，当我点击一个时，它右边的项目会移动位置，因为字体会变大，从而使列表项目的宽度变大。有什么可以避免的吗？我希望文本保持不变。非常感谢。

Answer 1

两种可能的解决方案：

在a元素上设置一个宽度，并使它们成为内联块。

​a {
    width: 100px;
    display: inline-block;
}

你只需要确保宽度足够宽，可以在不打断两行的情况下显示粗体文本。

第二个选项：使用文本阴影使其看起来粗体。

a.bolded {
    text-shadow:0px 0px 1px black;
}

这是一个演示两者。我有第二个悬停，但您可以使用jQuery的.toggleClass() 添加或删除该类

Answer 2

在为案例编写CSS时，有两个重要事件应该作为目标。一个是:hover，另一个则是:active。

它们被称为"伪类"，当您将鼠标悬停在元素上时（：悬停）和单击元素时（：活动），它们为您提供了设置元素样式的选项。

若将标记的样式设置为活动并悬停（通常只需要悬停），那个么应该会得到相同的结果，并且字体大小将保持不变。下面是一个例子：

a, a:hover, a:active { font: normal 13px Arial; text-decoration: none; }

在一行CSS中，您可以将所有样式设置为相同。

重要提示：您可以使用jquery，但不需要它（只是看到您在jsfiddle上使用它）。