一个父元素（块级元素）中有几个在同一水平线上的几个元素（行内块元素），设置其中某个元素的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. iOS UI-UIScrollView控件实现图片轮播 (UIPageControl-分页指示器)

    一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: #import "ViewController.h" #define HM ...

  2. kubernetes资源清单入门

    创建nginx容器: kubectl run nginx-deploy8 --image=nginx:1.14-alpine --port=80 --replicas=2 deployment &qu ...

  3. bzoj1677

    题解: 背包 每一个1<<i都是无限量 代码: #include<bits/stdc++.h> using namespace std; ,M=1e9; int n,dp[N] ...

  4. @one to many 和 @many to one小例子

    一个机构  : 多个用户 OrgTable实体类 :User实体类 OrgTable.java(一) 注解@OnetoMany,mappedBy=“org”,就是由“多”的那端维护(下面User类定义 ...

  5. selenium安装后，需要安装浏览器驱动

    google的驱动:chromedriver.exe 驱动版本与chrome版本对应的目录: http://npm.taobao.org/mirrors/chromedriver/2.32/notes ...

  6. Sqoop2安装

    下载 http://www-us.apache.org/dist/sqoop/ 打开以上链接,开始下载sqoop2   下载后得到:sqoop-1.99.7-bin-hadoop200.tar.gz文 ...

  7. 玩转X-CTR100 l STM32F4 l ESP8266串口WIFI模块

    我造轮子,你造车,创客一起造起来!更多塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ]- ESP8266是一款非常火的WIFI模块,性价 ...

  8. UITableView去掉分隔符

    或用代码实现 [TableView setSeparatorColor:[UIColor clearColor]]; 问题一用你给的方法貌似不行,我用这个方法把分隔线给“去掉”了:    [editV ...

  9. 解决在转发一条内容为满的彩信，删除主题FWD，发送的时候提示转化为短信。

    问题描述: 1.长按一条输入内容为满的彩信,选择转发 2.输入联系人-删除主题FWD-发送 测试结果为:提示正转化为短信(见附件) 预期结果为:不应该有提示,应该还是彩信 测试结果图为: 根据提示的T ...

  10. vs2010将写好的软件打包安装包经验

    (1) 用VS2010打开已经编写好准备做安装包的软件程序,右击解决方案,添加新建项目. (2) 在“新建项目”对话框中,选择“其他项目类型”,再选择“安装和部署”,然后在模板中选择“安装项目” (3 ...