在我们实现导航栏的时候，经常要用到ul标签。
通常，我们是通过给li标签设置display：inline-block来使其在一行里显示，但是这个时候出现了一个很头疼的问题。
我们先上代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style type="text/css" media="screen"> * { margin: 0; padding: 0; } html { font-size: 62.5%; } nav { width: 100%; line-height: 3rem; background-color: blue; padding: 0 1.5rem; } ul { text-align: left; } li { display: inline-block; background-color: red; padding: 0 1.5rem; } </style> </head> <body> <nav> <ul> <li>登录</li> <li>关于</li> <li>注册</li> <li>帮助</li> <li>退出</li> </ul> </nav> </body> </html>
将页面放大以后我们发现，每个li标签的后面都出现了一点点间隙。这是为什么呢？
问题的原因所在
笔者写过一篇关于DOM的文章，在叙述节点分类的时候提到，Chrome、opera等浏览器中，把节点与节点之中的空白符（即空格）也视为文本节点。
如图所示，写html代码时为了美观，写完每个li标签都会换行，换行的时候就会产生空白符。
如何解决这个问题呢？
1.写html代码时，把所有li标签写在一行里，从根上消除空白符，但是这样影响代码阅读，不易于后期维护。
<body> <nav> <ul> <li>登录</li><li>哈哈</li><li>嘿嘿</li><li>帮助</li><li>退出</li> </ul> </nav> </body>
2.还有一个很有意思的方式，就是li标签不闭合，让其自动补全，也是可以清除空白。
<body> <nav> <ul> <li>登录 <li>哈哈 <li>嘿嘿 <li>帮助 <li>退出 </ul> </nav> </body>
3.还可以给li标签一个负边距来抵消空白符的宽度，但是有一个缺点，就是空白符的大小跟父节点ul标签有关，而ul标签又跟浏览器有关，所以负边距的大小不好确定。
<style> li{margin-left:-3px;} </style>
4.既然空白符大小跟ul标签有关，那我们可以把ul标签的字体大小设置为0，再给li标签设置实际字体大小，这样就可以使空白符的大小为0。
<style> ul{font-size：0;} li {font-size : 1.2rem;} </style>
5.css4草案中有一个新增属性：white-space-collapsing，也可以解决这个问题，但是现在几乎没有浏览器支持，让我们展望未来吧。
扫一扫
2214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
