css - 如何使用 vertical-align : middle 将 UL 转换为 3 col 表

Question

不幸的是，我正在使用的 CMS 吐出 <ul>就像导航一样。

我有一个大菜单，我想在 3 列中显示。为此，我有:

#mainnav LI UL {
  display: table;
  width: 600px;
  height: 250px;
}
#mainnav LI UL LI{
  display: table-row;
  width: 33%;
}
#mainnav LI UL LI A{
  display: table-cell;
  vertical-align: middle;
}

这有点管用，但我想让每个菜单项都显示 vertical-align: middle;

如您在图像中所见，某些元素延伸到两行的地方有很大的缝隙。

有人知道实现这一目标的方法吗？

Answer 1

我建议你再做一个级别的 UL & LI，这样你就可以达到你所需要的。喜欢

#mainnav LI > UL > LI{
  display: table-row;
  width: 33%;
}
#mainnav LI > UL > LI > UL{
  vertical-align: middle;
}
#mainnav LI > UL > LI > UL > LI{
  vertical-align: middle;
}
#mainnav LI > UL > LI > UL > LI > A{
  display: table-cell;
  vertical-align: middle;
}