display: inline-block; 显示:内联块;
很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素浮动和边距。
简单来说,就是让一些块元素并排显示,为了更好的理解这一点,我把效果图片和代码贴出来:
内联块的作用的图片
<div class="app">
<div class="title clearfix">
<h3 class="fl">阿里APP</h3>
<a href="#" class="fr">更多></a>
</div>
<ul class="appicon">
<li><a href="#"><img src="images/app_01.png" alt="内联块的作用" alt=""></a></li>
<li><a href="#"><img src="images/app_02.png" alt="内联块的作用" alt=""></a></li>
<li><a href="#"><img src="images/app_03.png" alt="内联块的作用" alt=""></a></li>
<li><a href="#"><img src="images/app_04.png" alt="内联块的作用" alt=""></a></li>
<li><a href="#"><img src="images/app_05.png" alt="内联块的作用" alt=""></a></li>
<li><a href="#"><img src="images/app_06.png" alt="内联块的作用" alt=""></a></li>
<li><a href="#"><img src="images/app_07.png" alt="内联块的作用" alt=""></a></li>
<li><a href="#"><img src="images/app_08.png" alt="内联块的作用" alt=""></a></li>
<li><a href="#"><img src="images/app_09.png" alt="内联块的作用" alt=""></a></li>
<li><a href="#"><img src="images/app_10.png" alt="内联块的作用" alt=""></a></li>
</ul>
</div>
这个是代码
下面这个是css样式:
/*APP*/
.rirstright .app{
height: 111px;
background: #fff;
}
.rirstright .app .appicon{
text-align: center;
font-size: 0;
}
.rirstright .app .appicon li{
display: inline-block;
margin: 0 10px 8px 10px;
width: 32px;
height: 32px;
}
.rirstright .app .appicon li img{
width: 32px;
height: 32px;
}
.rirstright .app .title{
height: 30px;
line-height: 30px;
}
.rirstright .app h3{
font-size: 14px;
padding-left: 14px;
}
.rirstright .app a{
margin-right: 10px;
}
.rirstright .app a:hover{
color: #f40;
}


心无丘壑,何以画苍鹰!