1

我有一个像表格一样显示的水平导航。

标记如下：

<nav>
    <ul>
        <li><a href="">link</a></li>
        <li><a href="">multi line link</a></li>
        <li><a href="">any other link</a></li>
    </ul>
</nav>

display: table-cell 似乎在计算额外空间并添加填充以填充空白。

这是小提琴：http: //jsfiddle.net/F6DKx/

我需要它来增加高度而不是填充额外的空间，所以里面的锚元素可以和它一样高，以绝对将一个孩子定位在它的底部。

这是CSS：

nav { display: table; }
ul { display: table-row; }
li { display: table-cell; vertical-align: middle; }
a { position: relative; height: 100%; }
a:after {
    content: "";
    position: absolute;
    bottom: 0; left: 50%;
    width: 5px; height: 5px;
}

有任何想法吗？

4

0 回答 0