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不会消失。
具体应用稍后展示
