如何用CSS减少2行菜单项的行高？

Question

我在Wordpress中工作并尝试在菜单按钮中调整第二行文本的行高。

网站是：http://www.rochesterevents.com/ 在左侧菜单上，我想关闭菜单项“Lilac Festival”和它下面的日期之间的空间，以便他们阅读更多作为一个事件。在悬停时你会看到它们变成粉红色。我尝试将下面的代码添加到主题选项中的自定义CSS，但没有看到更改。

.menu-item-10 {
   line-height: 50%;
}

Answer 1

使用line-height在这些项目之间创建空间是一种糟糕的方法。

相反，请考虑在菜单中的链接（padding-top元素）上使用padding-bottom和<a>的菜单项之间创建垂直空间。或者在列表项（<li>元素）上，如果您愿意的话。

这样，您就可以按照的意思使用line-height。

建议在您的案例中实施：

ul#side-nav > li > a, 
ul#side-nav-toggle > li > a {
  line-height: 1.2em;
  padding: 1em 0;
}

Answer 2

您需要将行高规则放在li中的a上，如下所示：

.menu-item-10 a {
   line-height: 50%;
}

Answer 3

它不起作用的原因是<a>标记里面的 .menu-item-10标记有自己的行高设置（36px）。试试这个：

.menu-item-10 > a { line-height: 18px; }