两个元素使用了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. thinkphp3.2----设置静态缓存

    开启静态缓存后,页面刷新时获取的是静态页面,控制器增加输出内容时页面还是一样,除非超过缓存时间或html结构发生变化才重新生成页面缓存 1.定义静态缓存目录 define("HTML_PAT ...

  2. Openfire服务端源代码开发配置指南[转]

    转自:http://www.micmiu.com/opensource/openfire/openfire-src-config/   本文将图文介绍如何把openfire(以3.8.1为例)源码配置 ...

  3. 1.ajax简单实现异步交互

    效果:点击获取信息 testAjax.jsp: <%@ page language="java" contentType="text/html; charset=U ...

  4. c++primer 学习笔记

    1.1 编写简单的c++程序 函数4元素:函数类型.函数名.形参表.函数体 调用GNU(UNIX) g++ prog1.cc -o prog1 //生成可执行文件prog1,UNIX下默认a.out ...

  5. vue嵌套路由-query传递参数（三）

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...

  6. [CH3803] 扑克牌 （期望DP+记忆化搜索）

    [题目链接] [CH3803] 扑克牌 [题面描述] \(54\)张牌,每次随机摸一张,求得到 A张黑桃 B张红桃 C张梅花 D张方块 的期望步数．特别地,大王和小王可以当做任意一种花色,当然,会选择 ...

  7. Idea maven编译报错 javacTask: 源发行版 1.8 需要目标发行版 1.8

    javacTask: 源发行版 1.8 需要目标发行版 1.8 [INFO] ------------------------------------------------------------- ...

  8. Testlink 机器重启后Access denied for user 'admin '@'localhost' (using password: YES)解决

    问题表现: 装完Testlink,重启系统后,在testlink权限未分配会出现如下提示: 1045 - Access denied for user 'Testlink '@'localhost' ...

  9. MyBatis逆向工程详细教程

    1 导入逆向工程到eclipse中 2 修改配置文件 注意修改以下几点: 修改要生成的数据库表 pojo文件所在包路径 Mapper所在的包路径 配置文件如下: <?xml version=&q ...

  10. ASP.NET MVC 域名泛解析设置

    最近有个需求要做一个动态二级域名的网站,我们可以通过这样的方式去访问我们的网站 http://用户名.blog.com.而这里的用户名是根据程序的需要动态生成的.这里就会涉及到DNS服务器,要做相应的 ...