刚研究了一下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不会消失。
具体应用稍后展示