display: inline-block换行问题
来源:互联网 发布:重庆邮电大学就业知乎 编辑:程序博客网 时间:2024/06/05 18:47
最近做一个移动端的项目遇到一个问题,一行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>
- display: inline-block换行问题
- display: inline-block间隙问题
- display:inline-block 间距问题
- css display:block inline-block 问题
- display:inline-block 元素之间由于换行所产生的间距问题
- display:inline-block列表布局经常会遇到的“换行符/空格间隙问题”
- display:inline display:block
- display:inline、block、inline-block
- display:inline、block、inline-block
- display:inline、block、inline-block
- display:block、inline、inline-block
- display:inline-block产生的间隙问题
- 关于display inline-block的对齐问题
- display:inline-block的空白间隙问题!
- 关于display:inline-block问题总结
- css中display:inline-block错位问题
- display:none; display:block; display:inline和display:inline-block;
- display:inline-block属性
- spring注解@Scheduled中fixedDelay、fixedRate和cron表达式的区别
- 综合练习之--1、复用布局页面显示XLV 和 侧滑 vp效果
- eclipse搭建JSF简单示例的教程(亲测)
- 值类型和引用类型误区
- 使用webstorm操作git
- display: inline-block换行问题
- Android使用OKHttp3实现下载(断点续传、显示进度)
- JavaScript的this机制与箭头函数(一)——this绑定的4种机制
- java代码实现对数据库的备份操作
- ImageLoaderConfiguration全局类配置+DisplayImageOptions图片适配----缓存到sd卡
- oracle optimizer_mode 参数
- as
- 验证手机号码的表达式
- 前端取值的方式(ModelMap)