CSS学习笔记--导航栏元素由于页面缩小而被挤到下一行的解决方法

在制作一个页面时我们首先要考虑的就是页面的导航栏，也可以说是菜单栏。下面分别的一些常见网站的导航栏：　 

他们的特点都是以width:100%设置宽度，即无论页面放大多少都充满整个页面的宽度，但是页面放大是没有问题了，可是页面如果缩小（即只显示部分页面）就有可能导致导航栏的子元素被挤到下面，随着页面的不断缩小而持续不断地被挤到下一行。

我这里的解决方法是将导航栏在设置一个min-width属性，限制页面缩小时的最小宽度，当低于此宽度时页面出现滚动条，而不会导致元素被挤下来的现象。当然还有另外一种方法是设置响应式布局，根据浏览器大小来分别设置CSS样式，在此不再赘述。