1

我有一个带有许多链接的水平菜单，每个链接都需要有纯色背景色和每个链接之间的 1px 白色间隙。因此，我使用表格/表格单元格技术来强制每个LI缩小/扩大，因为它们需要在一条线上组合在一起。如果菜单有足够的项目或任何项目足够宽以至于LI > A需要将其文本包装到下一行，则此方法可以正常工作。但是，如果LI > A根据它们的内容/填充，所有这些都是全宽的，它们拒绝扩展到LI我display:table-cell;vertical-align:middle用来在每个中强制垂直居中文本的宽度，A并且似乎 display: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未被可点击链接覆盖。

感谢您的任何建议。

4

1 回答 1

0

在 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;

}

演示

于 2013-09-26T06:55:04.370 回答