×

关于inline-block解读

作者:Web前端之家2012.09.03来源:Web前端之家浏览:13920评论:1
关键词:inline-block
微信公众号

微信公众号

在我们写代码的时候估计很多人都会遇到inline-block问题。IE6、7 真的不支持 display:inline-block 吗?其实从IE5.5就开始支持了。下面简要说下吧:

再说line-block之前建议大家先去了解下inline、block和inline-block的区别吧,前面的文章有讲过。

关于inline-block还是拿实例来说明吧【下面只是讲总结实用性的,如果你想了解更详细的,可以去淘宝UED了解】

HTML代码:

  1. <div class="box">

  2.    <ul class="box-font dib-wrap">

  3.        <li class="dib">百度</li>

  4.        <li class="dib">谷歌</li>

  5.        <li class="dib">QQ彩票</li>

  6.        <li class="dib">我的彩票</li>

  7.    </ul>

  8.    <div class="box-font dib-wrap">

  9.        <a href="#" class="dib">百度</a>

  10.        <a href="#" class="dib">谷歌</a>

  11.        <a href="#" class="dib">QQ彩票</a>

  12.        <a href="#" class="dib">我的彩票</a>

  13.    </div>

  14. </div>

CSS部分:

body,ul,li,div{font-size:12px;padding:0;margin:0;}
ul,li{list-style:none;}
.box{margin:25px auto;width:450px;border:solid #ccc 1px;padding:25px;}
.box-font{height:50px;white-space:nowrap;}
.box-font li{display:inline-block;width:80px;height:28px;line-height:28px;text-align:center;border:solid #666 1px;background:#f5f5f5;}
.box-font a{display:inline-block;width:80px;height:28px;line-height:28px;text-align:center;border:solid #aaa 1px;background:#f5f5f5;}
.dib-wrap{
font-size:0;
*word-spacing:-1px;  /* 针对IE6、7像素偏差 */
letter-spacing:-5px; /* 有时候可以省略 */
*letter-spacing:0;    /* 有时候可以省略 */
}
.dib-wrap .dib{
font-size:12px;    
*display:inline;    /* IE6、7 block 元素 */

*zoom:1;    /* 现代浏览器 +IE6、7 inline 元素 */
word-spacing:normal;
vertical-align:top;
letter-spacing:normal;    /* 有时候可以省略 */
}

详细代码请看:DEMO

说明:

1、inline-block 产生的空隙与父级元素继承或者设定的 font-family、font-size 有关,通常情况下,12px 大小的 tahoma 字体,inline-block 后元素间产生的空隙(间隙)大约是 5px;所以letter-spacing的值要根据你的字体大小和样式来定。

2、产生 inline-block 空隙的根本性原因是:HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,因此产生了元素间的空隙。


您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/%E5%85%B3%E4%BA%8Einline-block%E8%A7%A3%E8%AF%BB.html

网友评论文明上网理性发言已有1人参与

发表评论:

评论列表

最新留言

  • Web前端之家

    已经加上了。...

  • 访客

    wordpress主题https://www.22vd.com,交换下友链麻烦通过...

  • Web前端之家

    你是可以试试的,其实用途有区别的。...

  • qdxx

    跟国内的比较Hchart等,如何?...

  • qdxx

    不错啊,收藏了!...

  • Web前端之家

    是的,多学习吧!...

  • qdxx

    这个的确坑,我也是刚遇到,感谢分享。...

  • 访客

    大苏打...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1