正文

让div排成一行===>inline-block的兼容性

IP云
IP云V管理员/3 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

行内元素，排列在一行，但是不能设置它的width、height、margin、padding属性，即使设置了，也是不生效的。

快元素独占一行，如下的这个例子，before div、in div1、in div2、after div分别占一行，也就是说，块元素前后都不能有行内元素和文本节点。 

    before div<div style="display:inline-block">in div1</div> <div style="display:inline-block">in div2</div> after div

那么如何让div 可以排列在一行呢？

用如下的方式： 

div{

     display:inline-block;//如果网站只兼容谷歌和火狐，这样写就可以

}

div{

     display:inline-block;//但是IE不支持inline-block，需要这么写，这样写3个浏览器

                                 //就可以都兼容了

     *display:inline;

     *zoom=1;

}

而且：当我们对div设置成了inline-block的时候，同样可以对其设置width、height属性，如果要让其居中，就不需要margin:0 auto;了，因为他具有了inline的特性，所以用text-align:center就行了。

例子：如下代码，执行之后，里面的div就是居中的，有宽，有高。 

<div style="border:solid;width:500px;height:400px;text-align:center;">

        <div style="border: solid; width: 300px; height: 200px;display:inline-block;">inline-block div</div>

    </div>

当我们对一个行内元素<span>设置成inline-block的时候，它也是可以有宽有高的（当我们不设置成inline-block的时候，它默认是inline，给他设置宽高，没效果） 

<span style="border: solid; width: 300px; height: 200px;">The Span hava width and height</span>

让div排成一行===>inline-block的兼容性的更多相关文章
  1. inline,block,inline-block的区别

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

  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. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  6. 排成一行的li之间的间隙问题

    现象 对于ul下li排成一行的布局(即li的display由list-item设为inline-block): 情况1 如果这些li在书写的时候有换行或者有空格,且ul本身的font-size不为0, ...

  7. CSS------ul与div如何排成一行

    如图: 代码:(需要给div的float属性设置为left) <div style="margin-top:10px"> <div style="flo ...

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

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

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

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

随机推荐
  1. hihoCoder #1867 GCD

    在集合 $[n]$ 上使用容斥原理. 固定 $i$,考虑有多少个 $j \in [n]$ 满足 $\gcd(i, j) = \gcd(a_i, a_j) = 1$,将此数目记作 $f_i$.暂时不考虑 ...

  2. 网络流 24 题汇总（LOJ 上只有 22 题？？？）

    太裸的我就不放代码了...(黑体字序号的题表示值得注意) 1.搭配飞行员 [LOJ#6000] 二分图最大匹配. 2.太空飞行计划 [LOJ#6001] 最小割常规套路.输出方案.(注:这题换行符要用 ...

  3. [AHOI2017/HNOI2017][bzoj4827] 礼物 [FFT]

    题面 传送门 思路 首先,有一个结论:两个手环增加非负整数亮度,等于其中一个增加一个整数亮度(可以为负) 我们令增加量为$x$,旋转以后的原数列为${a}{b}$那么现在的费用就是: $\sum_{i ...

  4. 调试Java代码（Eclipse）汇总

    Java 10个调试技巧(基础❤❤❤❤❤) Eclipse断点调试(和上一篇基本类似,补充❤❤) 使用Eclipse开发和调试java程序(从安装eclipse开始,特别细,有设置条件断点,回退的具体 ...

  5. swarm 发布服务

    1.发布服务 2.发布服务 服务发现:Swarm模式内置DNS组件,自动为每个服务分配DNS记录,然后服务的DNS名称在集群内的服务直接分发请求.负载均衡:在Swarm集群中创建服务时,Ingress ...

  6. 为MYSQL加注释--mysql注释符

    上午插入记录的时候一直没有成功,郁闷不知道为什么.因为是很多条记录一起插入,中间一些不用的数据就用"--"来注释了,结果没有效果. 没有办法,在网上找了找,才发现注释符" ...

  7. vue中通过路由跳转的三种方式

    原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...

  8. Flask request获取参数问题

    https://www.jianshu.com/p/ecd97b1c21c1 https://blog.csdn.net/lovebyz/article/details/52244330 https: ...

  9. HAOI2008题解

    又来写题解辣-然而并不太清楚题目排列情况...不管辣先写起来- T1:［bzoj1041］ 题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1 ...

  10. FCKEDITOR配置说明

    原文发布时间为:2009-10-12 -- 来源于本人的百度文章 [由搬家工具导入] fckeditor config.js配置2009-02-13 14:36 FCKConfig.CustomCon ...

相关阅读

目录[+]