Question

我有一个水平导航栏，当选择其中一个链接时，链接会变为粗体。但是，当我单击其中一个时，它右侧的项目会移动位置，因为字体变大，从而使列表项的宽度变大。反正有没有避免这个？我希望文本保持在同一个地方。谢谢。

Answer 1

两种可能的解决方案：

在a元素上设置宽度并使其成为内联块。

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

你必须确保宽度足够宽，允许粗体文字显示而不会断开两行。

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

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

这是一个显示两者的demo。我在悬停时有第二个，但您可以使用jQuery的.toggleClass()

添加或删除该类

Answer 2

在为案例编写CSS时，您应该定位两个重要事件。一个是:hover，另一个是:active。

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

如果将标记的样式设置为与活动相同并悬停（通常只需要悬停），则应获得相同的结果，字体大小将保持不变。以下是示例：

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

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

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