首先，这是一个初级程序员和初级简书使用者的第一篇小文章，如果有什么错误请指正，蟹蟹~
遇到的问题是，ul下面的li在横向排列的时候出现4px（或8px）的空隙
首先，我是如何遇到这个问题的呢？在一般的时候我不是太会注意到这儿的li之间会有4px得到缝隙，直到我在用js代码动态添加ul，li代码的时候发现布局发生了变化，初学者一定会遇到这样的情况，那么这到底是什么样的情况呢？其实是浏览器解析li那块代码的时候将<li></li>结尾的回车当成了一个空白字符。
先上一段代码
//最基本的ul和li结构，通常我们会这么写
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
在这个时候，我们有需求要让li横排显示，那么设置li的display:inline-block;属性，如果是纯粹的块级元素，那么不会产生干扰，但是行内元素有空格就会有影响了，结果就会产生这个问题。
解决方法来了，这是我看到比较简单易懂的方法：
1.通过代码书写去解决这个问题：
第一种：
//遇到这个问题最简单粗暴的解决方式，但是如果每个li内的代码比较多那就比较糟了，别说维护了，就是自己写也会乱套
<ul>
<li>aaa</li><li>bbb</li><li>ccc</li>
</ul>
第二种：
//这个就感觉有点逼格了，li标签结尾的 > 可以放在下一行，这样就相当于li标签是连起来没有空白字符，也就不会出现空隙
<ul>
<li>aaa</li
><li>bbb</li
><li>ccc</li>
</ul>
第三种：
//这一种看起来就比较反人类了，但是标签的书写不会分离，减少代码错误
<ul>
<li>
aaa</li><li>
bbb</li><li>
ccc</li>
</ul>
注意：html5的便签不闭合写法也可以解决这个问题，但是我个人是不推荐的，即使标准更改之后支持这样写法，但是如果doctype是xhtml就又不好用了，还是严谨一点的写法比较稳妥！
2.通过css样式上去解决这个问题：
第一种：float:left;
//这个其实是将 css 样式写回去了，因为我们使用 inline-block 实质上就是替换掉使用 float:left;
ul{float:left;}
第二种：(margin 设置负值)
//利用了盒模型
ul{margin:-4px;}
第三种：ul的font-size:0px;
//将字体的大小在li的样式上设置，ul上字体字号设置为0
//当然这种方法有一些缺陷，比如在safari上就不好用，其他的都是好用的
ul{font-size:0;}
li{font-size:12px;}
首先绝对是不赞成第二种方式，即使原理很简单，盒模型嘛，不选择的原因有两个：
第一个：margin：-npx;n值是不确定的，因为如果你更改了ul的字号，这个间距的大小是会变的！！！
第二个：只会让你代码的水准更加下降，没有腔调阿喂，没有逼格阿喂！
3.全兼容写法
第一个：jquery方法，百度一下吧。
第二个：css的第三种方法
ul{
letter-spacing:-npx;//兼容safari
font-size:0px;//兼容chrome
}
网友评论