</li>
<li>
<a href="javascript:;" target="_blank">智能</a>
</li>
</ul>
</div>
CSS代码：
CSS Code复制内容到剪贴板
a, ul, li { padding: 0; margin: 0; list-style-type: none; }
a { text-decoration: none; color: #333; }
.header ul { font-size: 0; text-align: center; }
.header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }
效果图
这是模仿京东首页头部导航菜单的实现，使用inline-block可以很简单的实现横向菜单列表
内联块元素
除了菜单之外，一切需要行内排列并且可设置大小的需求就可以用inline-block来实现。
例如使用a标签做按钮时，需要设置按钮的大小，我们就可以使用inline-block来实现。
HTML代码
XML/HTML Code复制内容到剪贴板
<div>
点击右边的按钮直接购买
<a href="javascript:;" class="button">
购买
</a>
</div>
CSS代码
CSS Code复制内容到剪贴板
.button { display: inline-block; width: 150px; height: 45px; background: #b61d1d; color: #fff; text-align: center; line-height: 45px; font-size: 20px; }
效果图
布局
inline-block也可以用于常见的布局，使用它就不需要去注意float属性布局带来的问题。
举例说明，创建一个常见的3列布局。
HTML代码
XML/HTML Code复制内容到剪贴板
<div class="wrap">
<div class="header">
网页头部
</div>
<div class="content">
<div class="left">
