<!-- HTML代码 -->
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>
/* css代码 */
.child {display:inline-block;background-color:#ccc;}
浏览器中显示的结果.png
虽然四个块状子元素排在了一行，但是子元素之间却留有空隙！
产生的原因：
HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。
解决办法：
- 方法一：改变html结构
结构1
<div class="parent">
<div class="child">
child</div><div class="child">
child</div><div class="child">
child</div><div class="child">
child</div><div class="child">
child</div>
</div>
结构2
<div class="parent">
<div class="child">child</div
><div class="child">child</div
><div class="child">child</div
><div class="child">child</div
><div class="child">child</div>
</div>
结构3
<div class="parent">
<div class="child">child</div><!--
--><div class="child">child</div><!--
--><div class="child">child</div><!--
--><div class="child">child</div><!--
--><div class="child">child</div>
</div>
结构4
<div class="parent">
<div class="child">child</div><div class="child">child</div><div class="child">child</div><div class="child">child</div><div class="child">child</div>
</div>
- 方法二：设置负的margin值
- 方法三：设置父元素的font-size:0;
- 方法四：设置父元素的word-spacing
.finally-solve {
letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -4px;
font-size: 0;
}
.finally-solve li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
zoom:1;
}
