使用inline-block来代替float进行布局&＃xff0c;或者使用inline-block来实现元素的居中效果。有关于使用inline-block来代替float的讨论也蛮多的。
不过就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。
先看下代码
HTML部分&＃xff1a;
| 1 2 3 4 5 6 7 | <ul> <li>item1 <li>item2 <li>item3 <li>item4 <li>item5 |
CSS代码&＃xff1a;
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | *{ margin: 0; padding: 0;}ul { list-style: none outside none; padding: 10px; background: green; text-align: center;}ul li { display: inline-block; *display: inline; zoom: 1; background: orange; padding: 5px;} |
明显的可以看出&＃xff0c;在inline-block的元素之间存在“4px”的空白&＃xff1a;
上面截图是&＃xff1a;IE8-9、Firefox、Safari等浏览器下的效果&＃xff0c;换句话说&＃xff0c;这种现像只有在这几种浏览器中才会出现。下面我们就来说说解决这个“4px”(Chrome下是8px)的几种方法&＃xff1a;
方法一&＃xff1a;改变HTML结构
简单一点的方法就是就是改变HTML的结构&＃xff0c;你可以使用下面几种方法的任何一种都可以达到效果&＃xff1a;
结构一:
| 1 2 3 4 5 6 7 8 | <ul> <li> item1 item2 item3 item4 item5 |
这种方法接近标签换行格式的写法&＃xff0c;也更趋近阅读。
结构二:
| 1 2 3 4 5 6 7 | <ul> <li>item1 ><li>item2 ><li>item3 ><li>item4 ><li>item5 |
结构二和结构一几乎是一样&＃xff0c;结束标签的“>”成了另一行的起始标签。
结构三:
| 1 2 3 4 5 6 7 | <ul> <li>item1 |
结构三的方法采用的是html的注释的方法&＃xff0c;这种方法我想大家不太常见&＃xff0c;不过同样能解决我们需要解决的问题。
结构四&＃xff1a;
| 1 | <ul><li>item1 |
结构四&＃xff0c;我想是大家常用来解决这样的问题的方法吧&＃xff0c;下面我们来看看按上述几种方法写的效果&＃xff1a;
方法一所说的是通过标签来解决&＃xff0c;虽然问题是解决了&＃xff0c;但可以说不能称作是技巧。而且上面的方法只适合于写静态页面的时候&＃xff0c;一旦你的HTML不是自己写&＃xff0c;而是后台生成&＃xff0c;就比如CMS来说&＃xff0c;标签后台生成&＃xff0c;此时&＃xff0c;我想大家又要骂街了&＃xff0c;这可怎么办&＃xff1f;其实我们除了上面的方法&＃xff0c;还可以使用CSS来解决的。
方法二&＃xff1a;负的margin
很多地方讨论使用负的margin来解决&＃xff0c;比如说&＃xff1a;
| 1 2 | ul{font-size:12px;}ul li{margin-right:-4px;*margin-right:0;} |
这种解决方法并不完美&＃xff0c;如果你的父元素设置的字号不一样&＃xff0c;可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果。
当然有些文章介绍使用”-0.25em”来解决&＃xff0c;这也是跟元素的字号有极大的关系。
所以我个人建议不使用负的margin来解决这样的问题。
方法三&＃xff1a;设置父元素字体为0
第三种方法设置父元素的字体为“0”&＃xff0c;然后在“inline-block”元素上重置字体需要的大小。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | ul { list-style: none outside none; padding: 10px; background: green; text-align: center; font-size: 0px; }ul li { display: inline-block; *display: inline; zoom: 1; background: orange; padding: 5px; font-size: 12px;} |
这样处理在Firexfox,chrome等浏览器下是达到了效果&＃xff0c;可是在Safari下可问题依然存在&＃xff1a;
按此来说&＃xff0c;方法三也不是绝佳的好方法&＃xff0c;用不用大家自己考虑。
方法四&＃xff1a;丢失结束标签
说实在的&＃xff0c;这种方法又回到了方法一&＃xff0c;在html标签上动手脚。就是让“inline-block”元素丢失关闭标签
| 1 2 3 4 5 6 7 | 1 2 3 4 5 |
样式基本不变&＃xff0c;我们来看看效果&＃xff1a;
这种方法虽然能达到各浏览器的兼容&＃xff0c;但还是有一个前提&＃xff0c;那就是“DOCTYPE”要选择对&＃xff0c;在“XHTML”下可就问题又出来了。
方法五&＃xff1a;jquery方法
最后在给大家提供一种jquery的方法&＃xff1a;
HTML代码
| 1 2 3 4 5 6 7 | <ul class&＃61;"removeTextNodes"> <li>item1 <li>item2 <li>item3 <li>item4 <li>item5 |
CSS代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | ul { list-style: none outside none; padding: 10px; background: green; text-align: center; font-size: 12px;}ul li { display: inline-block; *display: inline; zoom: 1; background: orange; padding: 5px;} |
jQuery 代码
| 1 2 3 | $(&＃39;.removeTextNodes&＃39;).contents().filter(function() { return this.nodeType &＃61;&＃61;&＃61; 3; }).remove(); |
最后一种方法是通过jQuery来改变“nodeType”的值&＃xff0c;从而实现我们需要的效果。
上面讲述了多种方法&＃xff0c;但要兼容多个浏览器版本&＃xff0c;并不每种方法实用&＃xff0c;以前常用的方法&＃xff0c;这次测试并不兼容所有浏览器。要做到兼容所有浏览器&＃xff0c;个人认为还是在html的标签上做一定的处理&＃xff0c;或者采用最后一种方法&＃xff0c;通过“jQuery”来改变“nodeType”值达到效果。
那么有关于“inline-block”的间距如何去除&＃xff0c;今天就扯到这了&＃xff0c;希望这篇文章对喜欢用inline-block的童鞋有所帮助。如果您有更好的方法&＃xff0c;记得与我们一起分享&＃xff0c;欢迎在下面的评论中留下您的经验&＃xff0c;或者指正上面的不对之处。
更新&＃xff1a;全兼容的样式解决方法
经过高人指点&＃xff0c;使用纯CSS还是找到了兼容的方法&＃xff0c;就是在父元素中设置font-size:0,用来兼容chrome&＃xff0c;而使用letter-space:-N px来兼容safari:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .finally-solve { letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/ word-spacing: -4px; font-size: 0;}.finally-solve li { font-size: 16px; letter-spacing: normal; word-spacing: normal; display:inline-block; *display: inline; zoom:1;} |
转自 http://blog.csdn.net/clh604/article/details/8295856
京公网安备 11010802041100号