HTML5学堂-码匠 HTML5学堂

您当前位于:HTML+CSS结构样式 ——> display显示效果,行内块元素(inline-block)的显示问题

display显示效果,行内块元素(inline-block)的显示问题

2015/05/25 21:13:17 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS结构样式 | 关键词:显示类型,行内块元素,inline-block

变态的inline-block带来的问题

HTML5学堂:变态的inline-block带来的bug。span之间的空隙,到底是什么?display:inline-block的元素虽然能够处于同一行,但是很变态的是它们之间出现了空格,如何处理?(例如在浮动元素居中当中,我们必须使用display:inline-block),本文给大家详细介绍inline-block。

span之间的空隙,到底是什么?

display:inline-block的元素虽然能够处于同一行,但是很变态的是它们之间出现了空格,如何处理?(例如在浮动元素居中当中,我们必须使用display:inline-block)

实例:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>内敛元素的间隙-独行冰海</title>
  6.     <style>
  7.         *{margin: 0;padding: 0;}
  8.         .con{
  9.             width: 300px;
  10.             height: 24px;
  11.             margin: 10px auto;
  12.             border: 1px solid #f00;
  13.             font-size: 14px;
  14.             line-height: 24px;
  15.         }
  16.         span{
  17.             border-right: 1px solid #00f;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class='con'>
  23.         <span>独行冰海</span>
  24.         <span>内联元素</span>
  25.         <span>小空隙</span>
  26.     </div>
  27. </body>
  28. </html>

欢迎沟通交流~HTML5学堂

如图:
HTML5学堂 变态的inline-block带来的问题 H5course

左侧有明显的空隙

原因:

内联元素在html中换行的同时会产生一个文本节点,可以使用负值的margin-right或者letter-spacing + word-spacing来解决这个问题,或者使用float,不考虑chrome可使用font-size基本解决。

浮动之后:
HTML5学堂 变态的inline-block带来的问题 H5course

inline-block用于块对象的横向排列(如图片组),其有着一些float不可替代的作用(如不错位、可垂直居中等),但在实际应用中,还是存在一个很纠结的弊端——有缝

行元素的使用方法:

  1. .father { font-family:'微软雅黑'; font-size:12px;}
  2. .father span { display:inline-block; background:#f60; width:100px; height:100px; margin-right:-0.5em;}

对象为块对象时:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>当对象为块对象时的解决方法</title>
  6. <style type="text/css">
  7. * { margin:0; padding:0;}
  8. .father { font-size:0px; font-family:'微软雅黑';}
  9. .father li { display:inline-block; *display:inline; zoom:1; background:#f60; width:100px; height:100px; margin-right:0; font-size:12px;text-align: center;line-height: 100px;}
  10. </style>
  11. </head>
  12. <body>
  13. <ul class="father">
  14.     <li>内容</li>
  15.     <li>内容</li>
  16.     <li>内容</li>
  17.     <li>内容</li>
  18. </ul>
  19. </body>
  20. </html>

有人如果在此问,我明明转化成行内元素了(IE6),但是,为何宽高还有效呢?这是由于通过 zoom:1 触发了 hasLayout,使其可以设置宽高。

该bug与文字的字体大小相关,这里之所以不直接使用font-size:0,然后在子对象上再进行大小恢复,其主要原因在于即使这样设置了,在safari、chrome以及为块对象时的ie6和ie7当中依旧存在1px的问题,需要单独hack。

小结

1. 缝隙的宽度与文字大小相关,缝隙就如同一个文本节点,字越大,缝隙也就越大。

2. 这个文本节点是由于换行产生的,故,如果span和span之间或li与li之间不存在换行,那就没必要这么罗嗦了。

3. 示例中采用了font-family:’微软雅黑’(也可以是simsun-宋体),这是因为在等宽字体的情况下,各浏览器对这个文本节点的宽度就很一致了:0.5em

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端