使用font-size:0 来去掉inline-block元素之间的空隙方法
2011-08-02 11:43
846 查看
像下面图中的布局,如果排列的元素是等高的话,相信很多人都会使用浮动来布局,不过如果元素不等高的话,不添加多余的标签,浮动布局是很难实现下图中的效果。如果遇到这种情况,可以使用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讲字体设回来。
现代浏览器的最新版都支持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>
相关文章推荐
- 使用font-size:0 来去掉inline-block元素之间的空隙
- 5种方法去掉HTML中Inline-Block元素之间的空白
- 父级元素的 font-size:0 解决子代的inline或inlien-block的换行或图片空隙问题
- 5种方法去掉HTML中Inline-Block元素之间的空白
- CSS 去掉inline-block元素间隙的几种方法
- css如何去掉inline-block之间的空隙
- Study《去掉HTML中Inline-Block元素之间的空白》
- 去掉inline-block元素默认间距的几种方法
- 多种去除inline-block元素之间的间隙解决方法详解
- [知识点滴]巧妙去掉HTML中Inline-Block元素之间的空白的4种技巧
- 去掉inline-block元素间隙的几种方法
- inline-block 元素之间间隙清除的几种方法
- 解决inline、inline—block之间空隙问题
- 去除inline-block元素间间距的N种方法
- sizeWithFont:方法使用明细
- JavaScript中的fontsize()方法使用详解
- 去除inline-block元素间间距的N种方法
- 【转】行内元素和inline-block产生的水平空隙bug
- 去除inline-block元素间间距的N种方法