带滑动条的导航栏(下)---修复浏览器变窄后导航栏变成两条的BUG

前言

  我在演示的过程中，突然发现了一个BUG，如下

  

  全屏时候，还能显示成一行，可缩小浏览器后，一行的浏览器就变成两行了，甚至更多行。

原因

  如下图，ul的父元素依次是nav-box 、 banner、body，而我在设置它们的时候，宽度都没有写成固定值，即body按照默认，banner的width为100%，nav-box的width为50%，如果将浏览器缩窄，假如此时浏览器可body的宽度width为200px，banner的宽度也为200px，而nav-box的宽度则成了100px。可想而知，当nav-box的宽度变的一定小之后，ul的li元素自然就溢出来了。

  

解决方法

   要解决此问题，其实说来也简单，只要给ul的任意父元素的width设置为固定宽度即可，如下，我改了banner的width

  

  此时效果图如下：

  

结语

  下一节准备在此基础上增加导航栏下面的滑动图片，丰富主页内容