一个父元素（块级元素）中有几个在同一水平线上的几个元素（行内块元素），设置其中某个元素的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. Activiti工作流笔记（3）

    Activiti工作流的流程部署和删除流程部署 流程部署代码: /** * 部署流程 */ public class ActivitiTest { RepositoryService reposito ...

  2. HashMap知识点、问题

    转载:https://blog.csdn.net/qq_27007251/article/details/71403647 https://www.cnblogs.com/kxdblog/p/4323 ...

  3. VS2010创建动态链接库(DLL)的方法

    1.第一步创建WIN32项目,选择DLL 2.第二步,创建你自己的DLL CPP文件和头文件,下面以两个简单的加减法函数为例子导出 然后编译生成即可.DLL文件在Debug或Release目录中 .d ...

  4. Python实现简单的爬虫获取某刀网的更新数据

    昨天晚上无聊时,想着练习一下Python所以写了一个小爬虫获取小刀娱乐网里的更新数据 #!/usr/bin/python # coding: utf-8 import urllib.request i ...

  5. anu - pureComponent

    import { inherit } from "./util"; import { Component } from "./Component"; impor ...

  6. Mathematica 迭代函数

    学习Mathematica迭代函数的几个画图例子: 1.三角形沿着某一点旋转 verticse = {{0, 0}, {1, 0}, {1/2, Sqrt[3]/2}}; tri = Line[ver ...

  7. springboot跨域请求

      首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 Java小组 工具资源 SpringBoot | 番外:使用小技巧合集 2018/09/17 | 分类: 基础技术 | 0 条评论 | 标 ...

  8. IntelliJ IDEA 2017.01配置jdk和tomcat

    之前开发Web项目都是用myeclipse或者eclipse,最近想用IDEA这个编辑器去配置一个Web项目,因为是新手,加上对界面的操作不熟练,所以在配置的过程中遇到了一些难题.最后配置成功,并且可 ...

  9. 用于主题检测的临时日志(0ece3f5c-d74f-449c-85a7-ed53fffb0e94 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

    这是一个未删除的临时日志.请手动删除它.(abf5973f-502f-47e6-8825-4dd1c2cdd799 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

  10. iOS被开发者遗忘在角落的NSException-其实它很强大

    NSException是什么? 最熟悉的陌生人,这是我对NSException的概述,为什么这么说呢?其实很多开发者接触到NSException的频率非常频繁,但很多人都不知道什么是NSExcepti ...