两个元素使用了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. TCP/IP——何时用UDP代替TCP

    UDP和TCP UDP和TCP都有其自身的特点,不同的应用场景和要求需要使用不同的协议来传输,那么何时我们可以用UDP代替TCP呢. UDP 的优点 UDP支持广播和多播,事实上如果应用程序使用广播或 ...

  2. 第九届蓝桥杯大赛个人赛决赛（软件类）真题Java

    更新中.......... 同一年的题解:https://www.cnblogs.com/dgwblog/p/10111903.html   01 结果填空 (满分11分) 标题:年龄问题 s夫人一向 ...

  3. docker images 按名称过滤

    docker images nihao_* 列出所有 nihao_* 正则匹配的镜像

  4. dubbo核心流程一览

    整体设计 图中从下至上分为十层,各层均为单向依赖,右边的黑色箭头代表层之间的依赖关系,每一层都可以剥离上层被复用,其中,Service 和 Config 层为 API,其它各层均为 SPI. Serv ...

  5. Shiro在SpringBoot中的使用

    Demo代码请参考:https://github.com/roostinghawk/ShiroDemo 以下为主要代码(经过验证,测试) 1. pom.xml:引用shiro <dependen ...

  6. 分分钟钟学会Python - 基础

    1.常见操作系统 1.windows xp/win7/win/10/window server 2.linux centos,图形化界面差 ubuntu,个人开发(图形化比较好) redhat,企业级 ...

  7. Redis中算法之——Raft算法

    Sentinel系统选举领头的方法是对Raft算法的领头选举方法的实现. 在分布式系统中一致性是很重要的.1990年Leslie Lamport提出基于消息传递的一致性算法Paxos算法,解决分布式系 ...

  8. 同时安装Python2和Python3，如何兼容并切换使用详解

    由于历史原因,Python有两个大的版本分支,Python2和Python3,又由于一些库只支持某个版本分支,所以需要在电脑上同时安装Python2和Python3,因此如何让两个版本的Python兼 ...

  9. 80x25彩色字符模式

    80x25彩色字符模式下显示缓冲区的结构: 在内存地址空间中,B8000H~BFFFFH共32KB的空间,为80x25彩色字符模式的显示缓冲区.往这个地址空间中写入数据,写入的内容会立即出现在显示器上 ...

  10. ViewData与ViewBag的区别

    本文导读:在asp.net mvc程序设计中,传递数据常常会用到viewdata.viewbag.ViewData是一个字典集合,通过key值读取对应的value:ViewBag是动态类型,作用和Vi ...