display: inline-block换行问题

最近做一个移动端的项目遇到一个问题，一行5个span标签，每个设为 inline-block，并分为不同的百分比显示在一行内，但是不知什么原因出现了换行现象，一度怀疑是百分比超了100%，但是检查后没查出问题，查找了一些资料发现问题出现在 inline-block上，inline-block是包含空格、换行符的，所以种种原因会导致inline-block产生间距，即会出现换行。

清楚inline-block的间距有很多方法，最简单的就是格式化代码或所以inline-block的标签写在一行无空格和换行符，也可以把父元素的font-size设为0，其他方法自行上网查找

如：

<p class="header pond-header">
<span class="award-time">时间</span>
<span class="winner">获奖用户</span>
<span class="user-award">用户奖励</span>
<span class="lucky-anchor">幸运主播</span>
<span class="anchor-award">主播奖励</span>
</p>

.header {font-size: .33rem;}

.pond-header span{display: inline-block;text-align: center;width: 21%;padding-right: 1%;}
.pond-header span:nth-child(1){width: 20%;}
.pond-header span:nth-child(3){width: 17%;}
.pond-header span:nth-child(5){width: 17%;padding-right:0;}

 

 

解决：

1.父元素设置font-size：0

.header {font-size: 0;}

.pond-header span{display: inline-block;text-align: center;width: 21%;padding-right: 1%;font-size: .33rem;}
.pond-header span:nth-child(1){width: 20%;}
.pond-header span:nth-child(3){width: 17%;}
.pond-header span:nth-child(5){width: 17%;padding-right:0;}

 

2.写在一行

<p class="header pond-header">
<span class="award-time">时间</span><span class="winner">获奖用户</span><span class="user-award">用户奖励</span><span class="lucky-anchor">幸运主播</span><span class="anchor-award">主播奖励</span>
</p>