Question

我有一个带有许多链接的水平菜单，每个链接都需要有一个纯色背景颜色和每个链接之间1px的白色间隙。所以我使用table / table-cell技术来强制每个LI缩小/扩展，因为它们需要在一行上组合在一起。如果菜单有足够的项目或任何项目足够宽，任何LI > A需要将它的文本包装到下一行，这样就可以正常工作。但是，如果所有LI > A根据其内容/填充都是全宽，那么当我使用LI强制垂直居中的文字时，它们会拒绝扩展到display:table-cell;vertical-align:middle的宽度每个A也似乎显示：table-cell不允许width:100%

之类的内容

这是CSS：

ul {
    display: table;
    padding: 0;
    width: 100%;
}

li {
    background:blue;
    border-right: 1px solid white;
    display: table-cell;
    vertical-align: bottom;
}

li:hover {
    background: red;
}

a {
    vertical-align: middle;
    height: 60px;
    display: table-cell;
    padding: 0 9px;
    color: white;
    text-align: center;
}

此处它正在行动中：http://jsfiddle.net/2GUpW/1/

我想我应该考虑一种垂直居中的替代方法，这样我就可以避免在display:table-cell上A，但是我不确定是否有一种可行的方法来实现这一点。我需要A覆盖LI的完整高度/宽度，否则LI的某些部分会被可点击链接覆盖。

感谢您的任何建议。

Answer 1

在li中定义高度而不是标记并垂直对齐。

使用以下更改：

    ul {
    display: table;
    padding: 0;
    width: 100%;
}

li {
    background:blue;
    border-right: 1px solid white;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 60px;

}

li:hover {
    background: red;
}

a {

    padding: 0 9px;
    color: white;
    text-align: center;

}

demo

全宽水平菜单中的垂直和水平中心文本

1 个答案: