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

时间:2024-03-21 17:22:41

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

如图所示:

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

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

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

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

min-width:1366px;

改完效果图如下:

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

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

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