如下图所示，在制作底部导航时，ul标签中嵌套了5个li元素width都设定为20%，ul width设定为100%，ul和li等元素都没有padding和margin。
li元素设定了display:inline-block; ul元素设定了white-space:nowrap;但是最后一个li显示效果换行。

解决方法：
为了解决上面的现象，在网络上收集了一些资料，了解到* inline-block是包含空格、换行符的，所以会导致inline-block产生不可见的间距，就出现了无法理解的换行。

可以通过以下办法去解决：

1.不设置display:inline-block，而是用我们熟悉的float来实现，这个办法就是换了一种思路，你有问题是吧，好，我换一种实现思路就好了。

2.设置父元素的属性：white-space: nowrap，强制不换行（不推荐使用）

3.父元素：font-size: 0（完美解决）