具有多行项目和垂直对齐的水平导航答案

【问题标题】：Horizontal nav with multiline items and vertical alignment具有多行项目和垂直对齐的水平导航
【发布时间】：2014-05-01 19:28:51
【问题描述】：

我想创建一个水平导航，它有时包含多行链接文本（并非总是如此；它是动态生成的），并且所有文本都垂直居中。

需要注意的是，我还想制作导航，以便 a 元素填满其包含元素的全部内容，以便每个链接的可点击和可悬停区域更大。

这可能只使用 CSS 吗？谢谢。

【问题讨论】：

一定要支持ie7吗？
不，但如果 IE7 也有纯 CSS 解决方案，那就太好了。首先，IE8 及更高版本。谢谢。

标签： css hyperlink vertical-alignment multiline nav

【解决方案1】：

完全披露：我通常不使用这种技术，但如果您认为有时链接会换行，这是一个非常简单的解决方案。另外，这个does not work in ie7 and below

每个前端开发人员都会告诉您，将表格用于非表格数据是一个禁忌，但使用表格样式会在这方面为您提供帮助。

如果您将display:table; 应用于包含的 div/ul/whatever，并将display:table-cell 应用于导航中的每个项目，那么您将能够使用诸如vertical-align:middle; 之类的属性。

您知道导航中有多少元素吗？如果没有，请创建一些如下所示的 css 属性：

.container.items-2 .item { width 50%; }
.container.items-3 .item { width 33%; }
.container.items-4 .item { width 25%; }
.container.items-5 .item { width 20%; }
/* ...etc... */

【讨论】：

我尝试过这样的事情，但它似乎不允许我创建填满整个包含 li 的大链接。
我写了一个快速小提琴。不确定它是否正是您要找的，但它会给我们一个起点：jsfiddle.net/pmn4/mG7Re
是的，这行得通。我想设定的高度是不可避免的，但这是一个令人满意的答案。谢谢。