两个元素使用了inline-block，并列显示时，会上下显示，给人感觉不在同一行

原因：其中一个元素使用了overflow:hidden，导致了基线变更

解决：1.另一个元素也添加overflow:hidden（缺点：设置line-height不在起作用）
　　   2.在使用overflow的元素上使用vertical-align:middle属性

inline-block元素，在同一行上下显示的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  3. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  4. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  5. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  6. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  7. 让块元素在同一行显示的方法： float 和inline-block

    float: 定义:按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来(不完全脱离文档流) 值: left.right.none 特点: 1.浮动的块元素可以在一行显示,宽度是被内容撑 ...

  8. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  9. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  10. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

随机推荐

  1. HTML5本地存储——IndexedDB二：索引

    HTML5本地存储——IndexedDB(二:索引)   在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexed ...

  2. MySQL压缩版Windows环境进行安装配置

    MySQL下载地址:https://dev.mysql.com/downloads/mysql/ 选择对应的系统和相应的版本后点击Download进入下载页面,不需要登录,点击下面的“No thank ...

  3. 编写第一个Go程序

    编码格式 Go语言源码文件编码格式必须是 UTF-8 格式,否则会导致编译器出错. 结束语句 在 Go 程序中,一行代表一个语句结束.每个语句不需要像其它语言一样以分号 ";"结尾 ...

  4. 51nod 1943 联通期望 题解【枚举】【二进制】【概率期望】【DP】

    集合统计类期望题目. 题目描述 在一片大海上有 \(n\) 个岛屿,规划建设 \(m\) 座桥,第i座桥的成本为 \(z_i\),但由于海怪的存在,第 \(i\) 座桥有 \(p_i\) 的概率不能建 ...

  5. Chrome打开网页都提示Flash Player因过期而遭到阻止

    1. 运行Chrome浏览器,地址栏输入:chrome://plugins/,找到pepflashplayer.dll安装位置, 如:D:\Program Files\GoogleChromePort ...

  6. Struts2和SpringMVC的action是单例还是原型的？

    struts2的acion单独使用的时候应是多例的,也就是原型(prototype). 因为它是基于类开发的,它的三种获取页面传参的方式都是通过成员变量的方式来接受的. 如果用struts2框架基于方 ...

  7. [转] 在Jenkins Pipeline DSL中 遍历 groovy list

    [From] https://stackoverflow.com/questions/36360097/iterating-a-groovy-list-in-jenkins-pipeline-dsl ...

  8. [转] shell逻辑运算总结, 包括[[]]与[]的区别，&&与-a的区别，||与-o的区别

    [From] https://www.cnblogs.com/tony1314/p/8315666.html 1. 关于文件和目录 -f  判断某普通文件是否存在 -d  判断某目录是否存在 -b  ...

  9. AWS S3

    Amazon Simple Storage Service (Amazon S3) Amazon S3 提供了一个简单 Web 服务接口,可用于随时在 Web 上的任何位置存储和检索任何数量的数据.此 ...

  10. Python模拟鼠标和键盘操作实现重复性操作

    前言 由于工作需要,要利用某软件去采集数据,做重复的动作大概500多次.所以想写一个程序代替人,去点击和输入. 一开始的思路有两个:1.用Python或者windows对此软件直接操作.2.利用Pyt ...