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

Question

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

需要注意的是，我还想制作导航，以便a元素填满整个包含元素，以便每个链接的可点击和可挖掘区域更大。

这只能用CSS吗？谢谢。

Answer 1

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

---

每个前端开发人员都会告诉您，使用表格表示非表格数据是禁忌，但使用表格样式可以帮助您。

如果您将[{1}}应用于包含div / ul /的内容，并将display:table;应用于导航中的每个项目，则可以使用display:table-cell等属性。

---

您知道导航中会有多少元素吗？如果没有，请创建一些看起来像这样的css属性：

vertical-align:middle;