合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

display:inline-block的几个应用及bug

日期:2013-11-29  来源:攀枝花惠康网络公司

和巨匠一样经常使用display:inline和display:block来进行块元素(block element)和内联元素(inline element,也?#34892;?#20869;元素)之间的转换。

display:inline-block的几个应用

块元素和内联元素的首要区别:

1.块元素会自动在末尾加一个换行,而内联元素?#25442;幔?#22810;个内联元素会自动排成一行,好比img标签或span标签插到一?#24418;?#23383;中,他会和这?#24418;?#23383;自动排成一行,而如不美观你在这?#24418;?#23383;中插入一个块元素标签,好比div标签,那么这个div标签会自己独有一行。查看demo:http://www.css88.com/demo/inline-block/inline-and-block.html
3.块对象界说的自身垂直边距可以改变行高,而内联元素虽然可以界说但改变不了行高。

巨匠可以再看看:

更多关于块元素和内联元素可以看看这里http://www.css88.com/archives/646;


2.块元素可以界说自身的高度(width)和宽度(height),而内联元素不成以。

按上述体例display:inline-block或者_display:inline;zoom:1后line-height就失踪效了,?#20197;?#27809;有好的解决方案,我是经由过程padding-top来做的,不知道巨匠有没有什么好的方案,接待留言填补。

display:inline-block是什么呢?

将对象呈递为内联对象,可是对象的内容作为块对象呈递。旁边的内联对象会被呈递在统一行内,许可空格。这就是display:inline-block的浸染,再讲的通俗一点就是,Display值为inline-block的元素内部形成一个块状盒模子,而本体态成近似一个内联的被替代元素”。即display为inline-block的元素既可以像块状元素一样界说高度宽度,又可以和内联元素(好交锋字)枚举在一行。(转载请注明出处:WEB前端开发 http://www.css88.com/)

( ⊙o⊙ )哇,?#20204;?#24180;夜的属性啊!我以前怎么没发现啊?是的很强年夜,可是以前的FF2,IE6,IE7不撑持改属性(今朝撑持的浏览器:FF3,Opera,Safari,Chrome,ie8),FF2可以使用FF的私有属性display:-moz-inline-box;而且FF2绝年夜年夜都已经进级到FF3了,所以不成什么年夜的问题了,IE6和IE7拥有这个display:inline-block就会触发layout,就相当于zoom:1(关于ie的layout看以查看:http://www.css88.com/archives/tag/haslayout),我们可以用该特征在IE6和IE7下模拟display:inline-block;也可以直接让块元素设置为内联对象呈递然后触发块元素的layout,即display:inline; zoom:1;

1.先看效不美观图:

2009-06-21_165043

2.html代码:


body{ font-size:12px;}

ol,ul{list-style:none; margin:0; padding:0}

a:link,a:visited{color:#555555;text-decoration:none;}

a:hover{color:#1A7CBC;text-decoration:underline;}

.selector{width:400px;border:1px solid #CDCDCD; padding:0px 2px 2px; margin:0 auto;zoom:1; overflow:hidden;}

.selector ol.tokenList li{float:left; margin-right:2px; margin-top:2px;height: 20px;color:#FFFFFF;}

.selector ol.tokenList li a{display:inline-block;padding-left:5px; height:20px;  background-image:url(bg.png); background-repeat:no-repeat;background-position:0 0;}

.selector ol.tokenList li a span{ display:inline-block;color:#FFFFFF; height:16px; line-height:1;padding-top:4px; line-height\**\:22px\9; background-image:url(bg.png); background-repeat:no-repeat; background-position:right 0; padding-right:5px; white-space:nowrap;}

.selector ol.tokenList li a:hover {color:#FFFFFF;text-decoration:none;}

.selector ol.tokenList li a span .x{display:inline-block;_display:inline; width:7px;height:7px;vertical-align:middle;cursor:pointer; margin-left:5px;font-size:1px; line-height:1px;background:url(col.png); zoom:1;}

.selector ol.tokenList li input{width:20px;height:16px;margin:0;padding:0;border:0;outline:0;}


查看demo:http://www.css88.com/demo/inline-block/inline-block.html

秦歌的display:inline-block的应用两例和CSS{display:inline-block};

3.CSS代码:


<div class="selector">

<ol class="tokenList">

<li><a href=http://www.css88.com/archives/"#"><span>草包<em class="x"></em></span></a></li>

<li><a href="#"><span>雷霍霆<em class="x"></em></span></a></li>

<li><a href="#"><span>龙翔<em class="x"></em></span></a></li>

<li><a href="#"><span>搜道<em class="x"></em></span></a></li>

<li><a href="#"><span>无忧<em class="x"></em></span></a></li>

<li><a href="#"><span>王帅帅<em class="x"></em></span></a></li>

<li><a href="#"><span>建仔<em class="x"></em></span></a></li>

<li><a href="#"><span>不告诉你<em class="x"></em></span></a></li>

<li><a href="#"><span>波仔<em class="x"></em></span></a></li>

<li><a href="#"><span>辰风<em class="x"></em></span></a></li>

<li><a href="#"><span>李晓晨<em class="x"></em></span></a></li>

<li><a href="#"><span>荣先乾<em class="x"></em></span></a></li>

<li><a href="#"><span>神飞<em class="x"></em></span></a></li>

</ol>

</div>

怿飞的display:inline臭番茄的:跨浏览器的inline-block

IE6的bug:(转载请注明出处:WEB前端开发 http://www.css88.com/)

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大?#34892;?#22478;市,我们高效优质的网站建设服务深受用户好评。

客服?#35748;擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  客服QQ:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
邮编:617200

合买大神 尤文图斯主力阵容 波斯波利斯遗址复原图 塞维利亚旅游攻略 360安全彩票中心 阿拉斯加垂钓APP下载 圣埃蒂安队服 蒙彼利埃景点 贵州快3计划 柔佛dt主场图片 哈尔滨狼队吴群