一个父元素（块级元素）中有几个在同一水平线上的几个元素（行内块元素），设置其中某个元素的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. Python学习之路day3-集合

    一.概述 集合(set)是一种无序且不重复的序列. 无序不重复的特点决定它存在以下的应用场景: 去重处理 关系测试 差集.并集.交集等,下文详述. 二.创建集合 创建集合的方法与创建字典类似,但没有键 ...

  2. wordpress 使用less 样式无法及时刷新

    wordpress 样式无法及时刷新 wordpress编写style样式时,无法及时刷新页面,因此特意记录一番如何处理较好,网友的建议清除Chrome缓存,实时修改style携带的参数 折腾之旅开启 ...

  3. Automatic Login Using sshpass

    #! /bin/bash user=root password=12345678 remote_ip=192.168.3.140 sshpass -p $password ssh $user@$rem ...

  4. SSH框架下载地址

    Struts各版本下载地址: https://dist.apache.org/repos/dist/release/struts/ Spring各版本下载地址: http://repo.spring. ...

  5. 清除 eclipse svn 账号密码

    进入目录 C:\Documents and Settings\administrator\Application Data\Subversion\auth 删除目录下所有文件,然后重新刷新svn地址就 ...

  6. SEL_CallFuncN,SEL_CallFuncO等的区别

    ocos2d-x中有大量的回调函数的应用,主要有以下几类,看下CCObject.h中的定义 typedef void (CCObject::*SEL_SCHEDULE)(float);// 用来调up ...

  7. 解决Ubuntu下添加Log却无法输出（高通平台）

    1.首先考虑到的是你所添加Log的位置确实没有被调用或者在调用前发生异常终止掉了. 2.你修改后没有进行编译或者没有push/install 3.如果你当前的系统版本是User版本,你在push的时候 ...

  8. mysql-5.6.17-win32安装

    下载免安装压缩文件http://dev.mysql.com/downloads/mysql/ 解压到自定义目录,我这里演示的是D:\wamp\mysql\   复制根目录下的my-default.in ...

  9. Maven私服Nexus详解

    maven的仓库只有两大类:1.本地仓库 2.远程仓库,在远程仓库中又分成了3种:2.1 中央仓库 2.2 私服 2.3 其它公共库. 私服是一种特殊的远程仓库,它是架设在局域网内的仓库服务,私服代理 ...

  10. SWIFT中计算两个日期间隔多少小时

    SWIFT中如何计算两个日期间隔多少个小时,其实几句代码就可以搞定了,Very Easy,在Playground内输入以下代码 var date1 = "2015-06-26 8:15:10 ...