對(duì)多個(gè)元素使用inline-block會(huì)在元素之間填充空白文本,在顯示上就是兩個(gè)元素之間有間隙。
有的時(shí)候一行有兩個(gè)元素當(dāng)對(duì)這兩個(gè)元素使用inline-block同時(shí)設(shè)置width: 50%,會(huì)出現(xiàn)折行,此時(shí)就是空白造成的,解決空白的幾種方法:
- 在父元素上設(shè)置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;
}
- 下移關(guān)閉標(biāo)簽
<ul>
<li>Item content</li
><li>Item content</li
><li>Item content</li>
</ul>