display:inline-block之用法
HTML的元素有多种display属性,比较常见的有display:none; display:block; display:inline和display:inline-block;等。详细可参阅W3Schools文档。
有些HTML元素自然地带有display:block;样式属性,比如
<div>
<h1>...<h6>
<p>
<ul>,<ol>,<dl>
<li>,<dt>,<dd>
<table>
<pre>
等元素,其显示为block样式,会将一行中其可用的空间给跨越占据,容不下另一个元素与其同行。
有些HTML元素则是自然带有display:inline;样式属性,这也是元素默认的样式,比如
<span>
<a>
<strong>
<em>
<img>
<br>
等元素,其不会打断文档排布流,会在一行中一个挨一个地排列。
当想要做一个水平的列表时,一种方式是使用float来实现,但得容忍其缺点;另一种方式是使用display:inline-block;来实现。现在转入正题了。
用float方式会带来的麻烦:
使用float方式需要注意的是,要有一个元素来包裹float元素,同时避免接下来的元素紧紧地靠近它。另外一个麻烦是,当有一个多行水平列表,但是列表里的内容有不同的高度时,就会排的非常痛苦。
用display:inline-block;方式:
display:inline-block;方式样式化列表时,既可使得列表元素能按行挨个排列,同时元素还能保持其块属性,比如高和宽、上下边距等。但是对有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
用display:inline-block;的浏览器兼容:
CSS中使用display:inline-block;来样式化,在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。但是在早期的IE,比如IE 7,就要做一些改变才能适应。
/* For IE 7 */
zoom: 1;
*display: inline;
通常,做浏览器兼容适应的CSS样式化,最好是分开独立的样式文件,然后通过条件注释将其引入。
用display:inline-block;的空白符引起的问题:
因为元素之间是行内inline修饰排列的,因此HTML中的空格符也会影响到这个修饰。也就是说,当我们把元素的大小和顺序排列好后,如果在<li>元素之间有空格符,这个空格符将会产生4px的边距。
综述,用display:inline-block;来实现水平列表比用float方式更容易控制,需要注意的是前者会由空格符带来边距影响。
补充两点:
1、inline-block默认是底部对齐的,要让两个元素顶部对齐,需要加上一句:veritcal-align:top;
2、inline-block 的宽度可以自行设置的,而inline的自行设置宽度是无效的。
display:inline-block之用法的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- CSS——display(Block none inline等)属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline; display:block;
block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- display:inline 跟 display:block 跟 display:inline-block区别
我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- 在windows和unbuntu上安装octave
windows安装octave 安装wiki Octave ftp库 从上述的库中可以找到对应的版本的octave的exe安装程序,或者是zip等的压缩包,建议直接下载对应系统的exe执行文件.安装. ...
- Learn Docker(一)—软件安装与常规操作
一.安装Docker Windows平台 在Windows10 X64专业版上可以直接下载Docker原生应用进行安装,在控制面板的程序与功能里启用Hyper-v,之后就可以运行docker程序啦. ...
- Swift-setValuesForKeysWithDictionary
重写 setValuesForKeysWithDictionary 那么字典中可以有的字段在类中没有对应属性 class Person : NSObject { var age :Int = // 重 ...
- .NET Core使用EF分页查询数据报错:OFFSET语法错误问题
在Asp.Net Core MVC项目中使用EF分页查询数据时遇到一个比较麻烦的问题,系统会报如下错误: 分页查询代码: ) * condition.PageSize).Take(condition. ...
- 个人项目----词频统计WEB(部分功能)
需求分析 1.使用web上传txt文件,对上传的txt进行词频统计. 2.将统计后的结果输出到web页面,力求界面优美. 3.在界面上展示所给url的文章词频统计,力求界面优美. 3.将每个单词同四. ...
- vue-cli配置axios,并基于axios进行后台请求函数封装
文章https://www.cnblogs.com/XHappyness/p/7677153.html已经对axios配置进行了说明,后台请求时可直接this.$axios直接进行.这里的缺点是后端请 ...
- phaser2 微信小游戏入手
phaser2小游戏基本没什么什么问题,可以下常开发游戏.如果遇到什么问题, 可以提出来共同讨论. 下面来个例子 import './lib/weapp-adapter'; import Phaser ...
- 网络流量统计using ADB
/proc/net/xt_qtaguid/stats 基本覆盖目前所有机型且统计流量全面 adb shell cat /proc/net/xt_qtaguid/stats | grep (uid#) ...
- HDU2486_A simple stone game
这个题目是这样的,一堆石子有n个,首先第一个人开始可以去1-(n-1)个,接下来两人轮流取石子,每个人可取的石子数必须是一个不超过上一次被取的石子的K倍的整数. 现在求对于一堆数量为n的石子是否为必胜 ...
- 按位与&、按位或|、按位异或^
与1进行位与&运算,值保持不变: 与0进行位与&运算,值清0: 按位与&常用于将整型变量中某些位清0,而其他位保持不变. 与1进行位或|运算,值置1: 与0进行位或|运算,值保 ...