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

时间:2019-10-31 15:36:58   收藏:0   阅读:476

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

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

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

 

 

原文:https://www.cnblogs.com/hamihua/p/11771377.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!