CSS学习笔记--导航栏元素由于页面缩小而被挤到下一行的解决方法
这个问题之前也遇到过,这次是在写一个vue项目中的头部组件发现的,最外层div给设置了width100%,头部布局是分左中右三部分,直接用的浮动布局,因此当我缩小屏幕宽度的时候,中间导航栏就被挤到下面,因为缩小后的宽度不够了,如图所示:可以看到我的导航栏已经被挤到下面。原因上面已经提过,就是宽度不够的问题,所以这时候我们只需要给头部组件最外的div设置一个最小宽度,我这里是设置...
·
这个问题之前也遇到过,这次是在写一个vue项目中的头部组件发现的,最外层div给设置了width100%,头部布局是分左中右三部分,直接用的浮动布局,因此当我缩小屏幕宽度的时候,中间导航栏就被挤到下面,因为缩小后的宽度不够了,
如图所示:
可以看到我的导航栏已经被挤到下面。
原因上面已经提过,就是宽度不够的问题,所以这时候我们只需要给头部组件最外的div设置一个最小宽度,我这里是设置的
min-width:1366px;
改完效果图如下:
可以看到,无论怎么拉动屏幕,不够显示的部分只会被覆盖起来,不会挤到下一行。
学而不思则罔思而不学则殆,刚毕业的小白,如果有更好的解决方案,可以在评论一起探讨。
更多推荐
已为社区贡献1条内容
所有评论(0)