带滑动条的导航栏(下)---修复浏览器变窄后导航栏变成两条的BUG

前言

我在演示的过程中，突然发现了一个BUG，如下

全屏时候，还能显示成一行，可缩小浏览器后，一行的浏览器就变成两行了，甚至更多行。

原因

如下图，ul的父元素依次是nav-box 、 banner、body，而我在设置它们的时候，宽度都没有写成固定值，即body按照默认，banner的width为100%，nav-box的width为50%，如果将浏览器缩窄，假如此时浏览器可body的宽度width为200px，banner的宽度也为200px，而nav-box的宽度则成了100px。可想而知，当nav-box的宽度变的一定小之后，ul的li元素自然就溢出来了。

解决方法

要解决此问题，其实说来也简单，只要给ul的任意父元素的width设置为固定宽度即可，如下，我改了banner的width

此时效果图如下：

结语

下一节准备在此基础上增加导航栏下面的滑动图片，丰富主页内容

带滑动条的导航栏(下)---修复浏览器变窄后导航栏变成两条的BUG相关推荐

导航栏下拉至一定高度后固定在顶部的特效
js要引入jquery文件: <script type="text/javascript"> $(function(){var nav=$("#header& ...
计算机桌面工具条宽变窄,电脑任务栏变窄了怎么办恢复任务栏方法
电脑任务栏变窄了怎么办? 从开始菜单可以打开大部分安装的软件与控制面板,快速启动栏里面存放的是最常用程序的快捷方式,并且可以按照个人喜好拖动并更改.应用程序区是我们多任务工作时的主要区域之一,它可以存 ...
深度linux任务栏在哪,更新Deepin 20后任务栏dde-dock消失不见的暂时解决
有些人更新或者升级Deepin 20系统后会造成任务栏dde-dock消失不见的情况,即以下图片标识的地方没有了,以下是关于该问题的暂时解决方法. 解决方法一临时解决方案是: nohup dde-d ...
已解决:mac下Chrome浏览器保存密码后无法填充
问题阐述: 每次登陆不同网页输入密码后,点击保存,再次登陆时无法填充解决方法: 关闭浏览器后删除 Google/Chrome/Default下的Login Data , Login Data-jo ...
【解决方法】点击bootstrap里导航条nav里的下拉菜单无反应)
[解决方法]点击bootstrap里导航条nav里的下拉菜单无反应 nav 导航条下拉菜单 nav 导航条下拉菜单只需要按顺序引入以下3个文件即可:
让微积分穿梭于工作与学习之间（14）：带圆弧多边形的面积计算（下，多值函数的情况）
这篇我们来研究下如何让多值函数在不拆分的情况下也能进行计算,毕竟曲线情况复杂了之后,拆分不一定是件容易的事情. 在上篇我们对圆方程进行积分的时候,为了去掉其中的根号,我们用了三角换元的方法. 这里我们 ...
为什么老师批改完试卷，分数下要画两条横线？今天终于知道了！
全世界只有3.14 % 的人关注了爆炸吧知识总有考试分数下画两条横线的习惯,原来是这样形成的! 为什么老师改卷之后会在分数下画两条横线呢? 你要去问老师? 别问了,可能连老师都不知道-- 来看看 ...
两条边延长角会有什么变化_叶片锁是什么样的叶片锁使用方法【详解】
随着时光的变迁,岁月的蹉跎,现在的锁头基本上已经渐渐的淡出了人们的视野,因为现在的门基本上都不会用到锁头.但是一般柜子和橱子还是要使用锁头的.锁的种类多种多样,其中比较新颖的锁就是叶片锁,那么这种锁是 ...
Win11任务栏太宽了怎么变窄？
我们在Win11系统的操作中,任务栏默认的宽度是无法直接通过鼠标拖拽的方法来更改任务栏的宽度大小的,那么Win11任务栏太宽了怎么变窄呢?其实我们可以通过修改注册表的方式来更改,下面小编就带着大家一起 ...

带滑动条的导航栏(下)---修复浏览器变窄后导航栏变成两条的BUG

带滑动条的导航栏(下)---修复浏览器变窄后导航栏变成两条的BUG相关推荐

最新文章

热门文章