一个父元素（块级元素）中有几个在同一水平线上的几个元素（行内块元素），设置其中某个元素的oveflow:hidden之后，会导致这几个行内元素不再是同一水平线上对齐

原因是：

1）行内元素的默认vertical-align:baseline（基线对齐），设置overflow不为visible之后会改变他的基线为下边距边缘

2）其他行内元素为了对齐，就会发生向下偏移的现象

解决方案：

方案一）显示设置行内元素对齐方式,em: vertical-align:top

方案二）设置其他元素都为overflow:hidden

方案三）设置元素float

使用overflow：hidden之后使的同行元素不对齐的更多相关文章

  1. CSS - flex使行内元素快速对齐

    div{ display:flex; alian-items:center; //使垂直对齐 justify-content:center //使水平对齐 }

  2. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  3. border-radius元素overflow:hidden失效问题

    父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属性,则父元素的overflow:hidden会失效. 解决方法: 父元素使用 -wei ...

  4. 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素

    同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...

  5. overflow: hidden用法，不仅仅是隐藏溢出

    overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <!DOCTYPE html> <html ...

  6. overflow:hidden的用法

    overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <%@ Page Language="C#& ...

  7. overflow:hidden;和clear:both;的不同点

    overflow:hidden;是针对被浮动元素的父级元素,是让父级元素找回原来的高,因为浮动的元素会让父级元素的高塌陷: 而clear:both:它是在新的元素上面书写,它是让上面浮动的元素不要干扰 ...

  8. 关于overflow:hidden的作用（溢出隐藏，清除浮动，解决外边塌陷等等）

    1.overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果 ...

  9. overflow:hidden 影响inline-block元素周围元素下移

    前言: 最近在切页中,我想实现左边一个类似下拉选框,且不允许输入,右边有一段垂直居中的文字描述的效果.我对文字用的是p标签.其实可以用个i/b/em等其他行内标签,同时也具有一定语义,做为强调提示,( ...

随机推荐

  1. img标签中alt属性与title属性在seo的作用-摘自网友

    img标签中alt属性与title属性作用,也许大家比较迷惑,现在给大家举例说明.alt属性是图片的替换文字.title属性规定元素的额外信息,有视觉效果. 目录 alt属性 title属性 ie和f ...

  2. MySQL解析过程、执行过程

    转载:https://student-lp.iteye.com/blog/2152601 https://www.cnblogs.com/cdf-opensource-007/p/6502556.ht ...

  3. Awk 从入门到放弃 （7） 动作总结之二

    第一题: 使用if语句进行判断

  4. kettle 发邮件带附件

    新建一个job,主要用到的组件有两个,如下图: 首先点击下图的文件,选择你要做为邮件附件的文件.选完后会在前辈的文件.目录中显示.然后点击增加,会下面文件列表中显示已经添加的文件(涂黄色的部分) 按下 ...

  5. bzoj3065

    题解: 替罪羊树 (讲道理昨天讲课我一点都听不懂) alpha取到0.75比较好(当然啦可能其他的更好) 每当不满足条件的时候就重构 代码: #include<bits/stdc++.h> ...

  6. Maven入门-5.Maven的聚合和继承

    1.Maven的聚合1.1 聚合的配置2.Maven的继承2.1 可被继承的POM元素2.2 POM中使用继承2.3 继承dependency 1.Maven的聚合 在Maven入门-4.Maven的 ...

  7. MyEclipse CI 2018.8.0正式发布（附下载）

    MyEclipse线上特惠,在线立享专属折扣!火热开启中>> MyEclipse 2018最终版日前正式发布,新版本通过构建Eclipse Photo.支持Java 10和Java EE ...

  8. ESXi6.5中将虚拟机从厚置备转换为精简置备

    本文来自:https://blog.csdn.net/wangjingkaibear/article/details/77097041 用ESXi做虚拟化,创建了一个原始虚拟机并安装好系统做好基本设置 ...

  9. HRBUST单词接龙

    题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...

  10. UML-(团队作业)

    UML设计 1.团队信息: 队名:异次元 2.团队成员: 姓名 分配任务 王诚荣(队长) 汇总合并,系统活动图 马祎特 好感度系统类图,电子版图片绘制 陈斌 个人中心,闹钟界面用例图,状态图 洪康 后 ...