设置overflow:hidden导致相邻行内元素向下偏移的问题

原创 2018年04月16日 16:11:37
<!-- html -->
<div>
    <span></span>
    <span></span>
    <span></span>
</div>

/* CSS */
div span{
    display:inline-block;
}
div span:nth(0){
    overflow:hidden;
    }

这样设置之后,后面的两个span会向下偏移一定距离
实际上就是inline-block元素的默认baseline和其下外边沿的距离。
常用的解决方法是为上述inline-block元素添加vertical-align: bottom。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014627807/article/details/79962060

WordPress网站使用和设置(学会网站应用)

-
  • 1970年01月01日 08:00

inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如下所示:那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度,然后对于长度...
  • iefreer
  • iefreer
  • 2015-12-28 19:54:34
  • 6545

设置inline-block元素的overflow:hidden意外增加元素总体高度的问题

来源1:https://my.oschina.net/u/214483/blog/663133 来源2:http://www.yidianzixun.com/home?page=article&...
  • cmlddcml
  • cmlddcml
  • 2016-10-12 16:59:52
  • 3015

overflow:hidden display:inline-block 行内对齐问题

同时拥有overflow hidden 和 display inline-block 的元素,会对行内元素垂直对齐 有影响, 导致原因是 overflow hidden 改变了默认对齐方式解决办法:...
  • ISaiSai
  • ISaiSai
  • 2016-04-22 14:06:08
  • 1669

transform导致的border-radius,overflow:hidden失效问题

写一个移动端的镜面过光效果的动画时遇到的一个问题,在父元素设置了border-radius属性,在overflow:hidden的时候镜面里的过光效果,没有被裁剪掉,导致应该隐藏的地方溢出,后来发现可...
  • Mr_WEB_Yao
  • Mr_WEB_Yao
  • 2017-03-10 11:33:28
  • 684

position:relative之后overflow:hidden;失效

position:relative之后overflow:hidden;失效,解决方法:在position:relative;的外层容器加position:relative...
  • jacky_Jxchen
  • jacky_Jxchen
  • 2011-02-17 11:13:00
  • 1078

神奇的overflow:hidden及其背后的原理

先来看两个overflow:hidden的使用例子。1、嵌套布局内部块元素设置float:left时,导致外部元素塌方,高度为0的问题。 CSS和HTML分别如下:.wrap { outli...
  • zjxin000
  • zjxin000
  • 2015-06-05 00:17:22
  • 1870

border-radius遇到transform,overflow:hidden失效

在做加速球时遇到问题,在使用border-radius样式元素的子元素使用transform,overflow会失效.效果如下: 网络上查找的解决方案多为 mask-image, ...
  • w20101310
  • w20101310
  • 2016-08-24 11:27:38
  • 2695

css overflow:hidden为什么会失效

现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?我们知道,overflow属性值有这几种: visible:声明内容不会被剪裁。比如...
  • qq_15253407
  • qq_15253407
  • 2016-02-17 21:41:58
  • 1378

overflow:hidden属性

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。 一提到清除浮动,我们就会想到另外一个CSS样式...
  • haluoluo211
  • haluoluo211
  • 2016-05-20 16:23:57
  • 9586
收藏助手
不良信息举报
您举报文章:设置overflow:hidden导致相邻行内元素向下偏移的问题
举报原因:
原因补充:

(最多只允许输入30个字)