Question

我一直在尝试使用display: table构建导航。代码为div为display: table，ul为display: table-row，li为display: table-cell。

每个li内部都有一个a标记，我只想在a类定义的导航中为活动页面的.active标记添加边距，但是它似乎为每个li添加了保证金。

知道这里发生了什么吗？

代码

<div>
    <ul>
        <li><a href="#">Pie</a></li>
        <li><a href="#">Pie</a></li>
        <li><a href="#">Pie</a></li>
        <li class="active"><a href="#">Pie</a></li>
        <li><a href="#">Pie</a></li>
        <li><a href="#">Pie</a></li>
    </ul>
</div>

div {
    margin-top: 50px;
    display: table;
    width: 100%;
}

ul {
    display: table-row;
    max-width: 400px;
    margin: 0 auto;
}

li {
    display: table-cell;
    text-align: center;
    background: red;
    height: 50px;
}

a {
    color: #fff;
    display: block;
    background: black;
}

li.active a {
    margin-top: 5px; 
}

a:hover {
    background: grey;
}

Answer 1

嗯，我已经弄清楚了。奇怪的是，当将边距添加到其中一个li标记时，所有a元素的大小都会增加。添加任何值的vertical-align似乎可以防止它们扩展并产生所需的效果。

但是，我不知道为什么会这样。

小提琴：http://jsfiddle.net/2DGjV/

添加边距以显示：table-cell子元素

1 个答案: