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

需要将链接设置为块级别：display: block;

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

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

Answer 2

尝试取出css中的.link课程，如下所示：

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

它对我有用：http://jsfiddle.net/TJonS/hvaSs/

Answer 3

默认情况下，您无法将填充顶部添加到a标记，您需要将其设为inline-block元素

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

padding-top with float：right没有结果

3 个答案: