display属性和position属性和left属性一起使用显示标题

header .banner-left{
height: 60px;
width: 10%;
display: inline-block;
vertical-align: top;
line-height: 60px;
text-align: center;
position: relative;
left: 7%;

background: url(../images/icon-1.png) no-repeat left;
background-size: 16% 50%;
}

 

header .banner-right{
font-size: 14px;
color: #E53C3C;
height: 60px;
width: 7%;
display: inline-block;
vertical-align: middle;
line-height: 60px;
text-align: center;
cursor: pointer;
position: relative;
left: 50%;

background: url(../images/icon-2.jpg) no-repeat left;
background-size: 15px 18px;
}

inline

【特征】

　　[1]内容撑开宽度

　　[2]非独占一行

　　[3]不支持宽高

　　[4]代码换行被解析成空格

inline-block(拥有内在尺寸，可设置高宽，不会自动换行)

【特征】

　　[1]不设置宽度时，内容撑开宽度

　　[2]非独占一行

　　[3]支持宽高

　　[4]代码换行被解析成空格

• 内联元素不能设置宽高度
• 内联块元素可以设置宽高度

 

 

把left属性都设置成0后

 

• relative相对定位，是相对于自己本来原先的位子，定位left值
• 如果把width设置成100%，会占用整行的宽度，最近的元素会出现换行