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;
}


心無丘壑,何以畫蒼鷹!