css - 使用显示 : table 的垂直对齐导航

Question

这是我要实现的目标:

Here's a fiddle显示我的样式(使用 display: table 因为我不想固定每个元素的宽度并且它应该是响应式的)。

我很接近，这是样式(为简洁起见，使用 SASS)及其外观:

.nav--main {
    ul {
        display: table;
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        li {
            display: table-cell;
            border: 1px solid #333;
            text-align: center;
            line-height: 1.2;
            vertical-align: top;
            overflow: hidden;
        }
    }
    a {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        height: 200%;
        padding: .5em;
        background-color: rgba(105,158,197,1);
        color: #fff;
        text-decoration: none;
    }
}

但我无法让 a 占据整个高度并在中间保持垂直居中。 This fiddle显示了一种有点 hacky 的尝试，但仅通过将 vertical-align 设置为 top。

我不想:

• 设置固定高度
• 将背景颜色放在 li 而不是 a 上:我讨厌可点击区域没有利用所有可用空间

Answer 1

我不知道，在那种情况下这可能会中断，但一个有点肮脏的技巧可能是这样的:

仅更新了 CSS 部分

ul {
    overflow: hidden;
}

a {
    margin: -5em 0;
    padding: 5.5em 0;
}

演示

Try before buy