对多个元素使用inline-block会在元素之间填充空白文本，在显示上就是两个元素之间有间隙。
有的时候一行有两个元素当对这两个元素使用inline-block同时设置width: 50%，会出现折行，此时就是空白造成的，解决空白的几种方法：
- 在父元素上设置font-size: 0
.inline-block-list { /* ul or ol with this class */
font-size: 0;
}
.inline-block-list li {
font-size: 14px; /* put the font-size back */
}
- 添加注释
<ul>
<li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>
- margin
.inline-block-list li {
margin-left: -4px;
}
- 下移关闭标签
<ul>
<li>Item content</li
><li>Item content</li
><li>Item content</li>
</ul>
网友评论