display:inline-block; 到底是个啥玩意?
css吧
全部回复
仅看楼主
level 5
任凭挫男沸腾
楼主
看了半天也没搞懂,能不能讲的通俗点?
2013年05月30日 06点05分
1
level 7
boyit0
display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 (准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)
2013年05月30日 06点05分
2
圣龍骑士
长姿势了~
2013年05月30日 06点05分
任凭挫男沸腾
那呈递为内联对象,是个什么效果?
2013年05月30日 07点05分
boyit0
就是行内元素呀,
2013年05月30日 07点05分
锤子α
说实在的inline-block还真没用过 但是从写法上还是可以理解它的意思的
2013年06月11日 02点06分
level 6
用户identity
我来说句人话吧。
display:inline; 内联元素,简单来说就是在同一行显示。
display:block; 块级元素,简单来说就是就是有换行,会换到第二行。
display:inline-block; 就是在同一行内的块级元素。
说概念太模糊,来个真实案例吧。
<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>
A默认就是一行,所以inline用在这里是废的。宽高度设置也是费的。
<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>
块状,这里高宽度就生效了,但是因为是块状,前后有换行符,所以这是两行了。
<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>
这样就是同时达到块状,而且在同一行显示。
2013年05月30日 09点05分
6
任凭挫男沸腾
通俗易懂啊,有的资料就喜欢用些专用术语,把别人搞晕了
2013年06月11日 02点06分
痴音要吃嫩包谷
说得好!说得明白!
2014年01月23日 12点01分
☆云水禅心
是滴啊 一看就明白了 太感谢了!!
2014年02月14日 09点02分
就在立秋那天
嗯,好东西!顶一下!
2014年02月16日 13点02分
level 12
得闲饮茶iii
学习了
2013年05月31日 04点05分
7
level 9
谷歌App
不就是只有宽度的行内快级元素么
吾等前方,绝无敌手!
[--蓝染惣右介]
------[来自MIUI V4 个人定制版]
2013年05月31日 05点05分
8
level 8
sunky2021
学习了 涨姿势了
2013年05月31日 06点05分
9
level 5
冷星泽之歌cW
设置了浮动或者定位的元素的display为inline-block;
所以我们很喜欢用浮动布局和定位布局啊,亲
摸摸哒,教我js
2013年06月11日 13点06分
10
level 7
我c度
别人说的是经验,自己动手才能真正的理解这个概念
2014年02月14日 15点02分
12
level 7
ldl5250058
简单来说就是将块文件横排显示
2014年02月16日 00点02分
13
level 9
不二很纯洁😘
转为行内快(可以设宽高,不独占一行)
2014年02月16日 03点02分
14
level 11
JeeDevil
学习了
2014年02月16日 03点02分
15
level 7
你的不在乎love
我来补充一下兼容性问题把。ie6,7不支持display:inline-block。可在后边加上ie6,7的hack
display:inline;//行内元素,使之具有内联元素的特性
zoom:0;//触发ie浏览器的haslayout,使之可以设置宽高
2014年02月16日 12点02分
16
艺灵设计网
说ie6,7不支持display:inline-block,这话说的有点绝吧。只是不支持原本是block的转换成inline-block而已!之前做过测试的,原文地址:
http://www.yilingsj.com/div/2013-08-02/64.html
2014年08月02日 13点08分
手机充电255555
可以再通俗易懂嘛,如何兼容各主流浏览器呢?
2016年02月06日 04点02分
level 12
老妈我去修仙了
就帮你顶一下吧
2014年02月16日 23点02分
17
level 9
hk1229
既有 inline 的特性,如 text-align
又有 block 的特性,如 width
-------------------------
Jedes Wort ist ein Vorurteil.
2014年02月20日 16点02分
18
level 12
老妈我去修仙了
我什么都不知道,只能帮你顶一下啦
2014年02月21日 15点02分
20
level 5
shadodw_lhx
不憧
2014年02月22日 00点02分
21
level 1
today163abc
2014年08月26日 12点08分
22
1
2
3
4
尾页