第一个p标签前边老是会有一块空白,而不是靠左的。
部分代码:<div class="heilan">
<div class="pic">PIC</div>
<div class="blogname">
<p>Blogger Name</p>
<h2>Blog Site Name</h2>
</div>
</div>
<div class="blog">
<p><a href="">This will be The Blog Entry Title</a></p>
<p>A short summary of the blog entry above.</p>
</div>
部分CSS:`#top-l .heilan{
margin-top:10px;
height:80px;
width:420px;
background: url(../images/pic-tit.png) no-repeat;
}
.pic,.blogname{
float: left;
color: #fff;
height:70px;
line-height: 0;
font-size: 20px;
}
.pic{
line-height: 24px;
margin:22px;
}
.blogname{
margin-left: 20px;
}
.blog{
width:420px;
}`
在Chrome调试中,蓝色部分是content
大小,红色部分是margin
大小。
可以看到<p>
标签的内容确实是占领了整行的。所以设置<p>
的行内对齐就好了:
css
p{ text-align: left; }
更多元素对齐的讨论可以参考:CSS Alignment:元素对齐问题
p标签有默认缩进的
.heilan {overflow:hidden;}
内边距问题吗→_→
没有清除浮动;
需要clear:both;