在列表项中包装文本的行高

Question

当您将鼠标悬停在“工作”上时，在http://steve.brettatkin.com/projects.php上会显示一个子菜单。第4和第5个链接包含文本。如何降低行高，使链接的第二行看起来不像新链接？

我在<li>尝试过margin / padding / line-height的组合，但它无效。

Answer 1

从line-height内的<a>移除<li>，然后将其放在<li>上，然后使用margin-top和margin-bottom } <li>之间的边距，并使用line-height line-height个<li>

（使<a>的悬停状态变为粗体也会使菜单在悬停时跳转，因为它不再总是适合1行）

Answer 2

我通常使用x padding-left和-x text-indent来解决这个问题。这样，包装的文本将缩进，但不是第一行。

#navigation li {
  padding-left: 10px;
  text-indent: -10px;
}

但是，如果你想改变行高，请注意你需要从前面的项目中获得某种余量 - 否则它们也只是压缩在一起。也许：

#navigation li a {
  line-height: 1.2em;
}
/* a in (li next to li) = only second item and forward */
#navigation li+li a {
  margin-top: 10px;
}

Answer 3

菜单下拉列表的行高电流设置为25px。尝试将其降低到一半：

line-height: 14px;

您可能需要将父LI元素的margin-bottom从3px向上移动以抵消链接元素的缩小行高。

将其添加到子标记应该对其进行排序：

line-height: 14px;
margin-bottom: 15px;

您可能希望将后者添加到LI而不是A。