inline-block布局方式

刚研究了一下inline-block布局方式

inline-block布局方式是一种比float浮动更优的一种布局方式。

一个超简单的demo

html:

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>inline-block布局</title>
 </head>
 <body>
 <ul class="inline-block">
     <li class="inline-block-in"><a href="#">首页</a></li>
     <li class="inline-block-in"><a href="#">详情介绍</a></li>
     <li class="inline-block-in"><a href="#">帮助中心</a></li>
     <li class="inline-block-in"><a href="#">联系我们</a></li>
     <li class="inline-block-in"><a href="#">关于我们</a></li>
 </ul>
 </body>
 </html>

css:

 <style>
     ul li {
         list-style: none;
         font-size: 12px;
         letter-spacing: normal;
         padding: 0 10px;
     }
     .inline-block {
         font-size: 0px;//inline-block 布局核心代码
         letter-spacing: -8px;////inline-block 布局辅助代码,兼容safari 浏览器
     }
     .inline-block-in {
         display: inline-block;//inline-block 布局核心代码
         vertical-align: top;//inline-block 布局辅助代码
     }
     .inline-block-in {
         *display: inline;//inline-block 布局辅助代码,兼容IE6~7
     }
 </style>

注意：两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失。

具体应用稍后展示