当前位置: 首页 > news >正文

详解CSS display:inline-block的应用

本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解。

回到顶部

基础知识

display:inline-block是什么呢?相信大家对这个属性并不陌生,根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身,简单的说:设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性,又保持了inline元素不换行的特性。

举例说明:以前我们做横向菜单列表的时候,我们可以通过li和float:left两者来实现,现在可以通过li和display:inline-block。

HTML代码:

复制代码
1 <ul>
2     <li>首页</li> 3 <li>关于</li> 4 <li>热点</li> 5 <li>联系我们</li> 6 </ul>
复制代码

CSS代码

1 ul, li { padding: 0; margin: 0; list-style-type: none; }
2         li { display: inline-block; border: 1px solid #000; }

效果图

 

inline-block基本效果

inline-block基本效果

可以看到li元素可以横向排列,并且可以设置width属性,大家可以复制代码自己查看效果或查看Demo

回到顶部

inline-block的问题

观察上面的例子,细心的同学肯定会发现,每个li之间有一个小空隙,而我们的代码中并没有设置margin等相关属性,这是为什么呢?

默认的inline元素

首先,我们观察一下默认的inline元素的表现:

HTML代码

1 <a>首页</a> 2 <a>热点</a>

CSS代码

1 a { margin: 0; padding: 0; border: 1px solid #000; }

效果图

inline默认情况

inline默认情况

默认情况下,inline元素之间就有空隙出现,所以结合了inline和block属性的inline-block属性自然也有这个特点。
那这些空隙是什么呢,它们是空白符!

消除空白符

在浏览器中,空白符是不会被浏览器忽略的,多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格,换行都会产生空白符。所以自然而然的两个元素之间会有空白符,如果将上述例子中的a标签写成一行,空白符消失,菜单之间也就紧凑起来了。

空白符虽然是浏览器正常的表现行为,但是通常情况下,设计师同学的设计稿不会出现这些空隙,我们在还原设计稿的时候,怎么去除掉这些空隙呢。
要去除空白符产生的间隙,首先要理解空白符归根结底是个字符,通过设置font-size属性可以控制产生的间隙的大小。
首先我们将font-size设置成50px试试,修改CSS代码如下:

1 ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px} 2 li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

我们修改ul的font-size为50px,而li的font-size为12px保持原来的字体大小,效果如下:

font-size:50px的空隙

font-size:50px的空隙


可以看到菜单之间的空隙变大了。
接着我们设置font-site属性为0px,代码如下

1 ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px} 2 li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

效果如下:

font-size:0的空隙

font-size:0的空隙


可以看到菜单之间的空隙没有了,大家可以自行查看Demo

兼容性问题

在IE8+,FF和Chrome的浏览器,inline-block可以完美的兼容,考虑到IE6和IE7等低版本浏览器的占用率,虽然有办法可以兼容,但本文不再赘述,大家有兴趣的可以查找相关资料。

回到顶部

inline-block的应用

inline-block的应用什么场景有哪些呢?我们大家考虑一个技术的应用场景时,首先一定要思考的是技术的特性和需求是否符合。inline-block的特点是结合inline和block两种属性的特性,可以设置width和height,并且元素保持行内排列的特性,基于这一点,所有行内排列并且可以设置大小的场景都是我们可以考虑使用inline-block的应用场景。下面举例说明:

网页头部菜单

网页头部的菜单就是典型的横向排列并且需要设置大小的应用,在inline-block之前,实现菜单基本都是用float属性来实现,float属性会造成高度塌陷,需要清除浮动等问题,使用inline-block实现就不需要在意这样的问题。代码如下:

HTML代码

复制代码
 1 <div class="header">  2 <ul>  3 <li>  4 <a href="javascript:;" target="_blank">服装城</a>  5 </li>  6 <li>  7 <a href="javascript:;" target="_blank">美妆馆</a>  8 </li>  9 <li> 10 <a href="javascript:;" target="_blank">超市</a> 11 </li> 12 <li> 13 <a href="javascript:;" target="_blank">全球购</a> 14 </li> 15 <li> 16 <a href="javascript:;" target="_blank">闪购</a> 17 </li> 18 <li> 19 <a href="javascript:;" target="_blank">团购</a> 20 </li> 21 <li> 22 <a href="javascript:;" target="_blank">拍卖</a> 23 </li> 24 <li> 25 <a href="javascript:;" target="_blank">金融</a> 26 </li> 27 <li> 28 <a href="javascript:;" target="_blank">智能</a> 29 </li> 30 </ul> 31 </div>
复制代码

CSS代码:

1 a, ul, li { padding: 0; margin: 0; list-style-type: none; } 2 a { text-decoration: none; color: #333; } 3 .header ul { font-size: 0; text-align: center; } 4  .header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

效果图

京东首页导航菜单

京东首页导航菜单

这是模仿京东首页头部导航菜单的实现,使用inline-block可以很简单的实现横向菜单列表

内联块元素

除了菜单之外,一切需要行内排列并且可设置大小的需求就可以用inline-block来实现。
例如使用a标签做按钮时,需要设置按钮的大小,我们就可以使用inline-block来实现。

HTML代码

复制代码
1 <div>
2  点击右边的按钮直接购买 3 <a href="javascript:;" class="button"> 4  购买 5 </a> 6 </div>
复制代码

CSS代码

1 .button { display: inline-block; width: 150px; height: 45px; background: #b61d1d; color: #fff; text-align: center; line-height: 45px; font-size: 20px; }

效果图

a标签菜单

a标签菜单

布局

inline-block也可以用于常见的布局,使用它就不需要去注意float属性布局带来的问题。
举例说明,创建一个常见的3列布局。

HTML代码

复制代码
 1 <div class="wrap">  2 <div class="header">  3  网页头部  4 </div>  5 <div class="content">  6 <div class="left">  7  左侧  8 </div>  9 <div class="center"> 10  中间 11 </div> 12 <div class="right"> 13  右侧 14 </div> 15 </div> 16 <div class="footer"> 17  网页底部 18 </div> 19 </div>
复制代码

CSS代码

复制代码
1 body, div { margin: 0; padding: 0; } 2 .header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; } 3 .content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size: 0; } 4  .content .left, .content .center, .content .right { display: inline-block; font-size: 16px; height: 400px; } 5  .content .left, .content .right { width: 200px; } 6  .content .center { width: 600px; background: #00ffff; }
复制代码

效果图

inline-block的三列布局

inline-block的三列布局


这个例子使用了inline-block做出了常见的网页布局。

关于inline-block的应用,只要是从左到右,从上到下,并且需要设置大小的列表都可以用它来实现,而这种需求是非常常见的,相比于float,我更推荐inline-block。inline-block的应用应该还有很多,大家可以多多挖掘出来。

回到顶部

总结

相比于使用float所带来的问题,使用inline-block所需要注意的点主要是空白符带来的问题,这一点也可以很方便的解决。
使用inline-block可以很方便的进行列表布局,更加符合我们的思维习惯,相信使用它的同学们也会越来越多,欢迎大家讨论。

 

原文地址:http://luopq.com/2015/11/01/display-inline-block/

 

相关文章:

  • Keras查看model weights .h5 文件的内容
  • 在WinForm中增加查询对话框对DataGridView数据进行循环查找
  • Ubuntu系统主题及插件工具等官方地址
  • 关于登录随机验证码的实现
  • Ubuntu 2TB sdb preseed示例
  • python 基础 9.2 mysql 事务
  • RAC同单实例物理备库的switchover
  • SmoothWall的小企业应用
  • AWS简介与历史
  • FOSCommentBundle功能包:设置Doctrine ORM映射(投票)
  • 一个16年毕业生所经历的php面试
  • svn1.5+TortoiseSVN1.5+VisualSVN1.5
  • sed常用
  • sublime配置文件
  • 性能测试之手机号码python生成方式
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • codis proxy处理流程
  • docker容器内的网络抓包
  • EOS是什么
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • Iterator 和 for...of 循环
  • JAVA SE 6 GC调优笔记
  • k8s 面向应用开发者的基础命令
  • Mithril.js 入门介绍
  • npx命令介绍
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 理解 C# 泛型接口中的协变与逆变(抗变)
  • 扫描识别控件Dynamic Web TWAIN v12.2发布,改进SSL证书
  • 什么软件可以提取视频中的音频制作成手机铃声
  • 使用 @font-face
  • 用jQuery怎么做到前后端分离
  • hi-nginx-1.3.4编译安装
  • Spring Batch JSON 支持
  • ​​​​​​​ubuntu16.04 fastreid训练过程
  • ​Base64转换成图片,android studio build乱码,找不到okio.ByteString接腾讯人脸识别
  • # Maven错误Error executing Maven
  • #pragma pack(1)
  • (06)Hive——正则表达式
  • (2009.11版)《网络管理员考试 考前冲刺预测卷及考点解析》复习重点
  • (4.10~4.16)
  • (C语言)字符分类函数
  • (Redis使用系列) SpirngBoot中关于Redis的值的各种方式的存储与取出 三
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (十一)图像的罗伯特梯度锐化
  • (转)JAVA中的堆栈
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试(准备篇)
  • .NET Framework Client Profile - a Subset of the .NET Framework Redistribution
  • .NET 分布式技术比较
  • .NET 线程 Thread 进程 Process、线程池 pool、Invoke、begininvoke、异步回调
  • .net6+aspose.words导出word并转pdf
  • /deep/和 >>>以及 ::v-deep 三者的区别
  • @angular/cli项目构建--Dynamic.Form
  • @RequestParam,@RequestBody和@PathVariable 区别
  • @zabbix数据库历史与趋势数据占用优化(mysql存储查询)