1

我试图将“back” div 左填充 30px，但没有从中心轻推“head” div。似乎无法正确处理。http://jsfiddle.net/bZeD9/

<div class='header top'>
    <div class="back">&lt;</div>
    <div class="head">HEADER HERE</div>
</div>

.header {
    background: none repeat scroll 0 0 #4A4A4A;
    text-align: center;
    color: #F1F1F1;
    line-height: 45px;
    padding-top: 3px;
    font-size: 20px;
    font-weight: 100;
}

.back {
    float: left;
}
4

3 回答 3

5

利用position:absolute

.back {
    position:absolute;
    left:30px; 
}

演示

于 2013-02-26T12:24:12.243 回答
0

将其定位设置为相对并添加 left: 30px;

.back {
    float: left;
    position: relative;
    left: 30px;
}

http://jsfiddle.net/jeffshaver/bZeD9/4/

于 2013-02-26T12:25:28.687 回答
0

添加

padding: 3px 30px 0;

到 .header 的 css

然后你将在右侧和左侧都有填充，所以如果你出于某种原因在标题 div 的右端放置一些东西，那也会自动定位到距离边缘 30px 的位置。我还将 3px 添加到顶部，因为你已经有了它，所以你可以删除padding-top.

我通常宁愿使用这种解决方案而不是绝对定位，这也有效，但更静态，我发现更难维护和改变，这是我个人的看法。

于 2013-02-26T12:34:09.747 回答