对于inline-block间的空白问题一直觉得很头疼,尝试过几种解决办法,自己感觉都不是很满意,今天在这总结一下
这样写的效果是每个li元素跟下一个元素之间都有4px的间距,下面说一下解决办法:
方法一:改变Html的结构,结构分为好多种,每种都能达到效果
(1)
好多人经常用这种方法,缺点是只能一行显示代码多的话会很难看而且很长,不易阅读;
(2)
这种写法相比(1)就更易阅读,而且接近标签换行格式的写法;
(3)
这种方法很相似,总结一下就是要让inline-block的标签首位相连不要换行;
(4)
这种办法就是用注释来代替inline-block标签间的换行,我在项目中不会用这种方法,因为种感觉代码跟跟注释一起显得代码好乱。
总结:以上这四种办法都能解决问题,但是也有局限性,就是只是用于静态页面,如果页面是后台生成的就没办法了;
方法二:改变margin值
注:父元素的字体不同,margin值也会做相应调整,所以不推荐使用,依情况而定;
方法三:父元素的字体设置成0
这种方法经常用,但是在Safari上不行
方法四:jquery方法,这种方法是从别人博客看到的
这种方法是可以的,不过就是通过jquery认为有点麻烦
这里介绍了几种方法都有欠缺之处,大家根据需求选择,如果有更好的方法可以告诉我
<ul>
<li>首页</li>
<li>二手房</li>
<li>新房</li>
<li>租房</li>
<li>业主</li>
</ul>
*{
margin: 0;
padding:0;
border: 0;
outline:0;
}
ul{
list-style: none;
text-align: center;
}
li{
display:inline-block;
padding: 0 15px;
background-color: #1c9b93;
}
这样写的效果是每个li元素跟下一个元素之间都有4px的间距,下面说一下解决办法:
方法一:改变Html的结构,结构分为好多种,每种都能达到效果
(1)
<ul><li>首页</li><li>二手房</li><li>新房</li><li>租房</li><li>业主</li></ul>
好多人经常用这种方法,缺点是只能一行显示代码多的话会很难看而且很长,不易阅读;
(2)
<ul>
<li>
首页</li><li>
二手房</li><li>
新房</li><li>
租房</li><li>
业主</li>
</ul>
这种写法相比(1)就更易阅读,而且接近标签换行格式的写法;
(3)
<ul>
<li>首页</li
><li>二手房</li
><li>新房</li
><li>租房</li
><li>业主</li>
</ul>
这种方法很相似,总结一下就是要让inline-block的标签首位相连不要换行;
(4)
<ul>
<li>首页</li><!--
--><li>二手房</li><!--
--><li>新房</li><!--
--><li>租房</li><!--
--><li>业主</li><!--
</ul>
这种办法就是用注释来代替inline-block标签间的换行,我在项目中不会用这种方法,因为种感觉代码跟跟注释一起显得代码好乱。
总结:以上这四种办法都能解决问题,但是也有局限性,就是只是用于静态页面,如果页面是后台生成的就没办法了;
方法二:改变margin值
li{ margin-left: -4px; }
注:父元素的字体不同,margin值也会做相应调整,所以不推荐使用,依情况而定;
方法三:父元素的字体设置成0
ul{
list-style: none;
text-align: center;
font-size:0;
}
li{
display:inline-block;
padding: 0 15px;
background-color: #1c9b93;
font-size:14px;
}
这种方法经常用,但是在Safari上不行
方法四:jquery方法,这种方法是从别人博客看到的
<ul id="removeBlank">
<li>首页</li>
<li>二手房</li>
<li>新房</li>
<li>租房</li>
<li>业主</li>
</ul>
*{
margin: 0;
padding:0;
border: 0;
outline:0;
}
ul{
list-style: none;
text-align: center;
}
li{
display:inline-block;
padding: 0 15px;
background-color: #1c9b93;
}
$('#removeBlank'),contents().filter(function(){
return this.nodeType === 3;
}).remove();
这种方法是可以的,不过就是通过jquery认为有点麻烦
这里介绍了几种方法都有欠缺之处,大家根据需求选择,如果有更好的方法可以告诉我