<style>*{ margin: 0; padding: 0;}.clearfix:after{ content: ""; display:block; height: 0; overflow: hidden; clear: both;}.clearfix{ *zoom:1;} .left{ width: 214px; height: 192px; border: 3px solid red; margin:10px;}.left_in{ width: 208px; height: 186px; border: 3px solid #ccc ;}.left_in h2{ background: url(imgs/left_title2.png) no-repeat center right; font-size: 14px; width:206px; height: 33px; line-height: 33px; border-bottom: 1px dotted #CBCBCB; border: 1px solid red;}.left_in h2 span{ display: block; background: url(imgs/left1.png) no-repeat center; height:33px; width:25px; margin-right: 20px; border: 1px solid red; float:left;}</style></head><body> <div class='left'> <div class="left_in"> <h2 class="clearfix"><span></span>标题</h2> 内容 </div> </div> </body></html>显示的是1.为什么“内容“不是在下面靠左边的位置呢，2.（1）.当我把.left_in h2 span里的display:block换成display:inline-block，去掉float:left时，就会出现"标题"下沉的情况，但‘内容’就正常了，显示是：（2）.当把h2中的height去掉，只保留line-height:33px;时，h2就变宽了，就会出现这种情况（3）.当设置h2的margin-top:-5px;时，也不行。出现如下应该怎样写才能让”标题“出现在蓝色条的中间，内容也能正常靠左边显示呢。大神帮帮忙！
4 回答
玩意11
TA贡献14条经验 获得超10个赞
.left_in h2 {
background: url(imgs/left_title2.png) no-repeat center right;
font-size: 14px;
width: 206px;
height: 33px;
line-height: 33px;
border-bottom: 1px dotted #CBCBCB;
border: 1px solid red;
}
把高度height:33px;去掉就好了
- 4 回答
- 0 关注
- 1966 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消