作家
登录

使用font-size:0 来去掉inline-block元素之间的空隙方法

作者: 来源:www.28hudong.com 2012-11-19 17:37:14 阅读 我要评论

像下面图中的布局,如果排列的元素是等高的话,相信很多人都会使用浮动来布局,不过如果元素不等高的话,不添加多余的标签,浮动布局是很难实现下图中的效果。如果遇到这种情况,可以使用inline-block来布局。 现代浏览器的最新版都支持inline-block,只有该死的ie6、7不支持inline-block,但ie6、7可以通过 display:inline;zoom:1;来模拟。 下面是inline-block兼容的代码: view sourceprint?display:inline-block;*display:inline;*zoom:1;width:100px;vertical-align:top; 但是大家有没有发现,在firefox,safari,opera,ie8+中的 inline-block 元素之间会莫名其妙多出3px的间距,其实这个是换行符,如果将 inline-block 元素间的换行符去掉,这3px的间距就会消失了。 有没有在不影响代码美观的情况下去掉间距尼,答案是有的。可以在inline-block的父元素中加上 font-size:0;然后在 inline-block讲字体设回来。 复制代码代码如下: view sourceprint?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> *{margin:0;padding:0;} body{font:400 12px/1.5 arial,sans-serif} li,.inline-block{display:inline-block;width:100px;background:#cdcdcd;font-size:12px;*display:inline;*zoom:1;vertical-align:top;} view sourceprint? .box{margin-top:10px;} .font0{font-size:0;} </style> </head> <body> <h1>写成一行的 line-block</h1> <ul> <li>我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block</li> </ul> <div class="box"> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> <h1>有换行符的 line-block</h1> <ul> <li>我是inline-block 我是inline-block 我是inline-block</li> <li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li> <li>我是inline-block 我是inline-block 我是inline-block</li> </ul> <div class="box"> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> </div> <h1>父级使用了font-size:0的 line-block</h1> <ul class="font0"> <li>我是inline-block 我是inline-block 我是inline-block</li> <li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li> <li>我是inline-block 我是inline-block 我是inline-block</li> </ul> <div class="box font0"> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> </div> </body> </html>

  推荐阅读

  DIV+CSS 全屏垂直居中的一个办法

例如下边的例子! 我是先定了一个点在中间,然后再把里边的这一块居中处理; <style> #info{height:0px; width:0px;top:50%; left:50%;position:absolute;} #center{background:#FFCC33;border:1px solid #0>>>详细阅读


本文标题:使用font-size:0 来去掉inline-block元素之间的空隙方法

地址:http://www.17bianji.com/kaifa2/CSS/16498.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)