一、现象描述:inline-block形式水平呈现的元素,换行显示或空格分割的情况下,元素之间会有间距,实例如下:
使用CSS将行内元素的display设置为inline-block时,也会出现间隔:
ul.test{width:500px;text-align:center;list-style:none;outside:none;background-color:#eee;padding:0 10px;}
ul.test li{display:inline-block;*display:inline;zoom:1;width:100px;background-color:#9f0;}
二、移除空格的方法:
或借助于标签注释
,由于margin负值的大小是与上下文字体和文字大小相关的,因此不适合大规模使用。
因chrome浏览器有一个默认的最小字体大小限制,为兼容chrome浏览器最好使用代码:font-size:0;
display: inline-block元素的父元素定义font-size:0,可, 子元素若要显示文字可重新定义font-size属性即可;
display: inline-block元素本身定义vertical-align属性可的多余空白。
ul.test{letter-spacing:-8px;} ul li{letter-spacing:0;}
若只在父元素使用letter-spacing,li中文字会发生重叠
ul.test{word-spacing:-8px;} ul li{word-spacing:0;}
若只在父元素使用word-spacing也可达到相同的效果,且li中文字不会发生重叠
参考:http://blog.csdn.net/xiebaochun/article/details/39178579
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。