父级div子级span给子级一个display: inline-block 为什么不在一行显示，解决方法：

最新推荐文章于 2022-10-28 14:51:03 发布

原创最新推荐文章于 2022-10-28 14:51:03 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文探讨了在使用inline-block布局时出现的换行问题及其解决方案。通过调整父元素的font-size属性或移除标签间的空格和换行符，可以有效避免因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.写在一行

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