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>
display: inline-block换行问题相关推荐
- [CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
- display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display的block、none、inline属性及解释
常会用到display对应值有block.none.inline这三个值 参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...
- display:inline display:block
display:inline; 元素会被显示为内联元素,元素前后没有换行符. display:block 元素将显示为块级元素,此元素前后会带有换行符. 举例: 1.display:block < ...
- 关于css的display:flex inline block inline-block和float
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...
- CSS 中 display 的 block,inline,inline-block 这三个属性的区别
基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别以及该死的ie6兼容问题
2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- CSS中display:block、inline、inline-block
display:block的特点: 1.block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. 2.block元素可以设置width,heig ...
- display:inline inline-block block
块级元素:默认设置display:block的元素<div>.<h1>~<h6>.<p>.<ul>.<ol>.<li> ...
最新文章
- Nature出炉「中国博士生图鉴」:过半学生想换领域换导师,40%学生受抑郁、焦虑困扰...
- boost::shared_ptr用法测试程序
- 【Idea解法】Failed to execute goal on project : Could not resolve dependencies for pro
- 输出亲朋字符串(信息学奥赛一本通-T1133)
- 玖云个人导航API工具网站源码
- 国内ip信息库的组建
- File类的基本操作方法
- bio linux 创建_Linux 五种IO模型
- java tfidf_Hanlp分词实例:Java实现TFIDF算法
- 国际直拨电话号码格式
- 解决微信端无法使用window.open打开文件的问题
- 粒子效果动画使用总结
- 【热门】2004年十大网络流行语征集ing
- 单片机项目:8个发光二极管从上至下间隔一秒流动,其中每个管亮500ms,500ms,亮时蜂鸣器响,灭时蜂鸣器关闭,一直重复下去
- 刺客列传鸿蒙记,高淳高级中学2020-2021学年高一上学期阶段测试语文试题.docx
- 1688商品详情接口
- 软件著作权(含源码、说明书、合作协议、以及提交软著的相关注意事项)
- FPGA入门系列17--task
- html微软雅黑无效,求让所有浏览器支持微软雅黑的方法_html/css_WEB-ITnose
- 在线教育长出“新触角”