inline-block布局方式

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

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

一个超简单的demo

html:

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>inline-block布局</title>
 6 </head>
 7 <body>
 8 <ul class="inline-block">
 9     <li class="inline-block-in"><a href="#">首页</a></li>
10     <li class="inline-block-in"><a href="#">详情介绍</a></li>
11     <li class="inline-block-in"><a href="#">帮助中心</a></li>
12     <li class="inline-block-in"><a href="#">联系我们</a></li>
13     <li class="inline-block-in"><a href="#">关于我们</a></li>
14 </ul>
15 </body>
16 </html>

css:

 1 <style>
 2     ul li {
 3         list-style: none;
 4         font-size: 12px;
 5         letter-spacing: normal;
 6         padding: 0 10px;
 7     }
 8     .inline-block {
 9         font-size: 0px;//inline-block 布局核心代码
10         letter-spacing: -8px;////inline-block 布局辅助代码,兼容safari 浏览器
11     }
12     .inline-block-in {
13         display: inline-block;//inline-block 布局核心代码
14         vertical-align: top;//inline-block 布局辅助代码
15     }
16     .inline-block-in {
17         *display: inline;//inline-block 布局辅助代码,兼容IE6~7
18     }
19 </style>

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

具体应用稍后展示