html - padding-top with float : right 没有结果

Question

我有这个:

HTML:

<div class="menu">
    <div class="logo">
        <img src="http://placehold.it/200x50"/>
    </div>
    <div class="add">
        <a href="#" class="link">Lorem ipsum</a>
    </div>
</div>

CSS:

.menu {
    width: 80%;
    margin: 0px auto;
}
.menu .logo {
    float: left;
}
.menu .add {
    float: right;
}
.menu .add .link {
    color: white;
    background: red;
    padding-top: 20px;
}

但是 padding-top 不工作，我不明白为什么。我试过 margin-top: 20px;，结果相同。

这是 JSFiddle:http://jsfiddle.net/Jsv75/

Answer 1

链接需要成为 block 级:display: block;

http://jsfiddle.net/Jsv75/1/

.menu .add .link {
    color: white;
    background: red;
    padding-top: 20px;
    display: block;
}