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

hamihua 2019-10-31 15:17 原文

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

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

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

 

 

推荐阅读