html - li:active 时内联列表项改变位置

Question

I have a horizo​​ntal navigation bar that when one of the links are selected the link then becomes bold. 但是，当我单击一个时，它右侧的项目会移动位置，因为字体变大，从而使列表项的宽度变大。有没有办法避免这种情况？我希望文本留在同一个地方。谢谢你。

Answer 1

两种可能的解决方案：

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

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

您只需确保宽度足够宽，允许粗体文本显示而不会中断为两行。

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

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

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

Answer 2

在为 case 链接 this 编写 CSS 时，您应该关注两个重要事件。一个是:hover，另一个是:active。

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

如果您将 a 标签的样式设置为与 active 和 hover 相同（通常只需要 hover ），那么您应该得到相同的结果并且字体大小将保持不变。这是和示例：

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

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

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