当在一行中需要展示多个拥有块级属性的标签元素时,通常选择display:inline-block;

优点:不用设置浮动或定位,浮动脱离文档流还需要清除浮动,定位降低扩展性。

问题:

   1、标签元素之间会出现间隙(原因:inline-block拥有默认字体大小属性,包括标签的换行);

   2、当标签内容为空时,会造成布局错乱(原因:inline-block默认字体对齐方式是vertical-align:baseline;即底部对齐);

解决:

  间隙处理:

    1、给父级元素设置定位;

    2、元素标签不换行;

    3、父级元素的font-size:0;清除字体影响;

    4、浮动;

  布局错乱:

    1、浮动;

    2、定位;

    3、设置verticle-align:top;字体上对齐;(推荐!)

布局inline-block问题的更多相关文章

  1. 页面布局排版-block,inline,float,relative,absolute等

    1.span和div的区别 div是块元素(block),span是行内元素(inline): span什么事也不会做,它存在的目的在与为开发者给它所围绕的元素指定样式.div类似,不过它引入了行分隔 ...

  2. inline, block, and inline-block

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

  3. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  4. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  5. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

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

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

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

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

  8. [ext4]04 磁盘布局 - Meta Block Groups

    Meta Block Groups,可以翻译为元块组集. 如果不采用Meta Block Groups特性,在每个冗余备份的超级块的后面是一个完整的(包含所有块组描述符的)块组描述符表的备份.如前所述 ...

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

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

  10. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

随机推荐

  1. SparkStream:4)foreachRDD详解

    转载自:http://blog.csdn.net/jiangpeng59/article/details/53318761 foreachRDD通常用来把SparkStream运行得到的结果保存到外部 ...

  2. 关于微信小程序获取二维码的踩坑记录

    1.踩坑需求:获取小程序的二维码 2.踩坑接口: https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN3 踩坑代码 pu ...

  3. 阅读ug949-vivado-design-methodology笔记

    阅读ug949-vivado-design-methodology笔记 xilinx更加推荐使用同步复位 怎样去设计时钟使能信号

  4. js一些常规操作

    1.判断数组为空 var arrayList = [] 方法1. if (arrayList == (null || "" || undifine)) { 为空操作 } 方法2. ...

  5. 使用Excel自动生成sql语句

    在近一段日子里,进入了新的项目组,由于项目需要,经常要将一些Excel表中的数据导入数据库中,以前并没有过多的接触过数据导入与数据处理,对于我来说比较痛苦,今天下午花了几个小时处理数据,但是同事给我提 ...

  6. goflyway简单使用

    前言 一个朋友最近新买的搬瓦工ip突然被强了,要等10周左右才能免费更换ip.而恰巧在网上看到了Goflyway 进阶教程:KCP 协议复活被墙IP 决定试一试.在vultr上临时搭建了测试环境,可能 ...

  7. 20175227张雪莹 2018-2019-2 《Java程序设计》第九周学习总结

    20175227张雪莹 2018-2019-2 <Java程序设计>第九周学习总结 教材学习内容总结 第十一章 JDBC数据库操作 MySQL数据库管理系统 下载安装MySQL 若下载的是 ...

  8. css 实现 左右div 等高, 同时父级div就是最高的子div的高度

    原文地址:https://www.cnblogs.com/cbza/p/7145384.html 方法一: 通过父级overflow:hidden,  自己设置padding-bottom 和 mar ...

  9. Apartment 2019:(1)创建墙体

    墙体建模 The Walls 软件:SketchUp Pro 2017 墙体模型 建模过程: 一.导入图像并调整大小 导入公寓平面参考图/户型图(来自网络),导入为图像.连续三击鼠标左键,选中所有的几 ...

  10. 使用原生JDBC循环读取文件并持久化到数据库

    先上代码: package com.demo.common.service; import java.io.File; import java.io.FileInputStream; import j ...