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

这个问题之前也遇到过，这次是在写一个vue项目中的头部组件发现的，最外层div给设置了width100%，头部布局是分左中右三部分，直接用的浮动布局，因此当我缩小屏幕宽度的时候，中间导航栏就被挤到下面，因为缩小后的宽度不够了，

如图所示：

可以看到我的导航栏已经被挤到下面。

原因上面已经提过，就是宽度不够的问题，所以这时候我们只需要给头部组件最外的div设置一个最小宽度，我这里是设置的

min-width:1366px;

改完效果图如下：

可以看到，无论怎么拉动屏幕，不够显示的部分只会被覆盖起来，不会挤到下一行。

学而不思则罔思而不学则殆，刚毕业的小白，如果有更好的解决方案，可以在评论一起探讨。