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

Question

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

我已尝试过margin/padding/line-height的组合,<li>但它无法正常工作.

Answer 1

删除line-height从<a>您的内部<li>S和把它放在<li>!而非,然后使用margin-top和margin-bottom对之间的差额<li>S和使用line-height的line-height单一的<li>小号

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

Answer 2

我通常使用xpadding-left和-xtext-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;
}