最近做一个移动端的项目遇到一个问题,一行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.写在一行
时间获奖用户用户奖励幸运主播主播奖励