一、橫向菜單

inline-block是不換行的塊級元素，對於使用ul-li結構的網頁頂部橫向導航菜單非常有用。

如果不使用inline-block屬性，只能使用float來浮動每個li元素，寫起來比較麻煩，如果使用了inline-block代碼相對簡單：

 1 <div class="header">
 2     <ul>
 3         <li>
 4             <a href="javascript:;" target="_blank">服裝城</a>
 5         </li>
 6         <
 
li>
 7             <a href="javascript:;" target="_blank">美妝館</a>
 8         </li>
 9         <li>
10             <a href="javascript:;" target="_blank">超市</a>
11         </li>
12         <li>
13             <a href="javascript:;" target="_blank">全球購</
 
a>
14         </li>
15         <li>
16             <a href="javascript:;" target="_blank">閃購</a>
17         </li>
18         <li>
19             <a href="javascript:;" target="_blank">團購</a>
20         </li>
21         <li>
22             <
 
a href="javascript:;" target="_blank">拍賣</a>
23         </li>
24         <li>
25             <a href="javascript:;" target="_blank">金融</a>
26         </li>
27         <li>
28             <a href="javascript:;" target="_blank">智能</a>
29         </li>
30     </ul>
31 </div>

css代碼如下：

1 a, ul, li { padding: 0; margin: 0; list-style-type: none; }
2 a { text-decoration: none; color: #333; } 
3 .header ul { font-size: 0; text-align: center; }
4 .header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

二、需要行內排列設置大小

例如使用a標簽做按鈕時，需要設置按鈕的大小，我們就可以使用inline-block來實現。

1 <div>
2     點擊右邊的按鈕直接購買
3     <a href="javascript:;" class="button">
4         購買
5     </a>
6 </div>

css代碼：

 1 .button {
 2   display: inline-block; 
 3   width: 150px; 
 4   height: 45px; 
 5   background: #b61d1d; 
 6   color: #fff; 
 7   text-align: center; 
 8   line-height: 45px; 
 9   font-size: 20px; 
10 }

三、布局

比如創建一個三列布局：

 1 <div class="wrap">
 2     <div class="header">
 3         網頁頭部
 4     </div>
 5     <div class="content">
 6         <div class="left">
 7             左側
 8         </div>
 9         <div class="center">
10             中間
11         </div>
12         <div class="right">
13             右側
14         </div>
15     </div>
16     <div class="footer">
17         網頁底部
18     </div>
19 </div>

css代碼：

1 body, div { margin: 0; padding: 0; }
2 .header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; }
3 .content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size: 0; }
4 .content .left, .content .center, .content .right { display: inline-block; font-size: 16px; height: 400px; }
5 .content .left, .content .right { width: 200px; }
6 .content .center { width: 600px; background: #00ffff; }

效果圖：

關於inline-block的應用，只要是從左到右，從上到下，並且需要設置大小的列表都可以用它來實現，而這種需求是非常常見的，相比於float，我更推薦inline-block。

display的inline-block替代float的一些場景