一开始我想设置一个导航栏，宽度充满整个屏幕的，每个子导航的宽度相同，均分导航栏的宽度，效果图如下（为了说明均分，我给每个子导航特意加了背景颜色）：
然后我开始写HTML代码，很简单啦，如下：
- 1 2 3 4 5
<span class="kwd">inline</span><span class="pun">-</span><span class="pln">block</span> 6 7 8
登录后复制 9 Home10 Pros11 News12 Jobs13 14 15
然后开始设置CSS代码：
- 1 body{margin: 0 auto;}2 .main-nav{width:100%;font-size:20px;height: 30px;line-height: 30px;text-align: center;background-image:linear-gradient(black,#ccc,black) ; margin: 0;padding: 0;}3 .main-nav li{display: inline-block; list-style:none;height: 100%;width:25%;}
登录后复制
发现结果变成了下面这样：
立即学习“前端免费学习笔记（深入）”；
li各占宽度的25%，不应该是像效果图那样平铺一整行吗？看到li之间有空隙，我以为是margin或padding等造成的，我就把li元素的margin和padding都设置为0，发现并无卵用。
然后就各种查资料，才得知：HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙；可以使用word-spacing设置负值来解决，但是空隙会随着字体大小变化而变化，当字体大小改变了，word-spacing的值也得重新设置；或者使用float方法，更简单一些。针对我的问题，把.main-nav设置{word-spacing:-10px;}或者.main-nav li设置{float:left;}就解决了。
有关inline-block更深入的了解，推荐参考脚本之家《带你深入剖析inline-block属性值的前世今生》
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
