突出显示导航中的元素

Question

地狱我正在进行导航，其中一个特定的元素应该从导航的其他元素突出显示。 我创建了一个css类突出显示我增加字体的大小。但是，文本与较小的文本不同。

#navigation .bar a.highlight{
font-size: large;
}

看起来像这样：

抱歉，我是css和html的新手，我想这是一个简单的解决方案。

请查看我的代码 http://jsfiddle.net/FcbJv/

Answer 1

首先，我建议不要在CSS中使用large之类的关键字作为font-size，而是使用px或em单位（更好的可维护性，浏览器可以区别对待这些关键字）。

您可以通过减少line-height菜单项上的.highlight与font-size的增加成比例来达到您想要的效果。这样可以保留菜单项的vertical rythm。

• jsfiddle

<强> CSS

/*EM  (personal preference) */

#navigation .bar a.highlight{
   font-size: 1.4em; /* we increase size by .4ems */
   line-height:.6em; /* so we reduce line-height by .4 ems */
}

/* PX */

#navigation .bar a.highlight{
    font-size: 18px; /* just guessing here, make sure to set this to the actual desired height */
    line-height:10px;
}

Answer 2

您需要添加line-height。

试试这个：

#navigation .bar a.highlight {
    font-size: large;
    line-height: 12px; /*Same as your font-size for normal items*/
}

由于页面的字体大小为12px，line-height 12px将垂直居中。如果更改字体大小，请务必更改line-height。

Check this JSFiddle.

Answer 3

在CSS中垂直对齐事物是让你发疯的事情之一。

尝试改进列表项的line-height：

line-height: 16px;

另外，请尝试使用您想要的font-size而不是large，因为它可能因浏览器而异。