解决display:inline-block;行内块元素出现空白空隙问题

作者:Davidszhou   来源:SEO优化博客   时间:2015-09-10 16:14:16   点击:
    ul li关于display:inline-block行内块元素中间有空白间隔解决办法
    今天在仿一个国外站做一个专题页面时,在写网站主题的导航模块时,使用了行内块元素:display:inline-block;
    发现这样操作:每一个li之间会出现相等间距,使用浏览器开发者模式工具也找不到原因所在。
    具体情况贴图如下:
解决display:inline-block;行内块元素出现空白空隙问题
解决display:inline-block;行内块元素出现空白空隙问题
    具体是什么原因造成的呢?两处使用display:inline-block;行内块元素都是出现这种情况,上图中加了边框之后看的更明白,之前写这种行内块都是使用float:left;这种浮动做出来,后来发现了display:inline-block;发现这个比float:left;更简便,但是现在出现了空隙应该如何解决?由于要求下午必须把仿的一个页面做出来一个大概,直接百度的答案,至于为何出现这种情况,大致看了一下是因为连续多个空白符(空格,换行符,回车符等)引起的,至于如何解决display:inline-block;行内块元素出现空白空隙问题,答案就是:给他的父元素加:font-size:0px;,
    按照这样的话,我给ul 加:font-size:0; 我li 里面的文字不就都为0了吗? so!你可以在给li加一个font-size,更方便全局生效,可以实现在一个全局共用CSS文件加:
    ul { font-size:0px;}
    li { font-size:12px;}
    一次设置全局受益。

TAGS:display:inline-block , 行内块元素

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/20150910/61.html转载请标注此链接

文章推荐
七日热点
热力推荐
网站统计
文章总数:126
今天发布:1
软件资源数:17