一个父元素（块级元素）中有几个在同一水平线上的几个元素（行内块元素），设置其中某个元素的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. SPFA单源最短路径算法

    我们用数组d记录每个结点的最短路径估计值,而且用邻接表来存储图G.我们采取的方法是动态逼近法:设立一个先进先出的队列用来保存待优化的结点,优化时每次取出队首结点u,并且用u点当前的最短路径估计值对离开 ...

  2. redis 处理命令的过程

    redis版本:redis-3.2.9 在客户端输入 set name zhang,调试redis服务器,得到调用栈如下: 在dictReplace中加了断点,结果跳出来4个线程,redis还是单进程 ...

  3. 从输入URL到页面加载发生了什么

    大体过程 浏览器的地址栏输入URL并按下回车 浏览器检查当前URL是否存在缓存,并比较缓存是否过期 DNS解析URL对应的IP 根据IP建立TCP连接(三次握手) HTTP发起请求 服务器处理请求,浏 ...

  4. app.jsNodejs启动测试服务

    'use strict'; var express = require('express');var app = express('');var fs = require('fs'); app.get ...

  5. ajax ajax基本介绍

    jquery中ajax方法参数详解 url 要求是string类型参数(默认为当前页面地址) 发送请求的地址 type 要求是string类型的参数,请求方式(post或get)默认为get.注意其他 ...

  6. httpclient 使用代理

    httpclient_使用代理 当爬取网页的时候,有的目标站点有反爬虫机制,对于频繁访问站点以及规则性访问站点的行为,会采用屏蔽IP的措施. 这时候代理IP就派上用场了. 代理的分类 透明代理 匿名代 ...

  7. 重启oracle数据库的操作方法

    在实际的应用中,有时候工作数据库需要重新启动.本文介绍了一个特别实用的操作步骤,希望对大家有所帮助. 1. 停应用层的各种程序 2. 停Oralce的监听进程 $ lsnrctl stop 3. 在独 ...

  8. SQL Server 调优系列基础篇 - 子查询运算总结

    前言 前面我们的几篇文章介绍了一系列关于运算符的介绍,以及各个运算符的优化方式和技巧.其中涵盖:查看执行计划的方式.几种数据集常用的连接方式.联合运算符方式.并行运算符等一系列的我们常见的运算符.有兴 ...

  9. 【重大更新】DevExpress v17.2新版亮点—WPF篇（三）

    DevExpress年终击穿底价,单套授权低至67折!仅剩最后10天!查看详情>>> 用户界面套包DevExpress v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增 ...

  10. jQuery单选组美化特效

    需求:根据数据动态生成单选组 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...