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

一、横向菜单

inline-block是不换行的块级元素，对于使用ul-li结构的网页顶部横向导航菜单非常有用。

如果不使用inline-block属性，只能使用float来浮动每个li元素，写起来比较麻烦，如果使用了inline-block代码相对简单：

 <div class="header">
     <ul>
         <li>
             <a href="javascript:;" target="_blank">服装城</a>
         </li>
         <li>
             <a href="javascript:;" target="_blank">美妆馆</a>
         </li>
         <li>
             <a href="javascript:;" target="_blank">超市</a>
         </li>
         <li>
             <a href="javascript:;" target="_blank">全球购</a>
         </li>
         <li>
             <a href="javascript:;" target="_blank">闪购</a>
         </li>
         <li>
             <a href="javascript:;" target="_blank">团购</a>
         </li>
         <li>
             <a href="javascript:;" target="_blank">拍卖</a>
         </li>
         <li>
             <a href="javascript:;" target="_blank">金融</a>
         </li>
         <li>
             <a href="javascript:;" target="_blank">智能</a>
         </li>
     </ul>
 </div>

css代码如下：

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

二、需要行内排列设置大小

例如使用a标签做按钮时，需要设置按钮的大小，我们就可以使用inline-block来实现。

 <div>
     点击右边的按钮直接购买
     <a href="javascript:;" class="button">
         购买
     </a>
 </div>

css代码：

 .button {
   display: inline-block;
   width: 150px;
   height: 45px;
   background: #b61d1d;
   color: #fff;
   text-align: center;
   line-height: 45px;
   font-size: 20px;
 }

三、布局

比如创建一个三列布局：

 <div class="wrap">
     <div class="header">
         网页头部
     </div>
     <div class="content">
         <div class="left">
             左侧
         </div>
         <div class="center">
             中间
         </div>
         <div class="right">
             右侧
         </div>
     </div>
     <div class="footer">
         网页底部
     </div>
 </div>

css代码：

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

效果图：

关于inline-block的应用，只要是从左到右，从上到下，并且需要设置大小的列表都可以用它来实现，而这种需求是非常常见的，相比于float，我更推荐inline-block。