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。

巴特西

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

最新文章

热门文章