display: inline-block换行问题

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

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

如：

时间
获奖用户
用户奖励
幸运主播
主播奖励

.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.写在一行

时间获奖用户用户奖励幸运主播主播奖励