侧边导航栏展开后子菜单宽度多出1px问题

已于 2022-02-10 11:03:39 修改
阅读量992 收藏 5
点赞数 3
分类专栏： Element-UI 文章标签： vue.js javascript html
于 2022-02-10 11:03:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44706779/article/details/122855770
版权

侧边导航栏展开后子菜单宽度多出1px问题

一、应用场景

在这里插入图片描述
       可以看到在导航栏的一级菜单与二级菜单长度不一致，对于我们这种强迫症来说当然受不了啦，因此我们要让他们长度一致。那为什么会出现这种情况呢？

二、出现原因

在这里插入图片描述
在这里插入图片描述
      上面两张图分别是一级菜单与二级菜单的盒子模型，可以看到二级菜单的总宽度才是我们设置的200px，那么问题也就是出在了一级菜单上，盘它！查看它的样式，在它的样式里居然没找到原因！！？？没办法了，那就只能再往上找一层了。既然一级菜单样式里没找到，那么我们就到

最低0.47元/天 解锁文章
什么时候才能为富不仁
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-aside中添加el-menu设置collapse宽度自适应
wocjy的博客
03-08 1693
el-aside内使用el-menu,水平折叠时宽度无法自适应问题解决
Vue element响应式布局导航栏递归生成.el-submenu .el-menu-item里面出现min-width:200px样式穿透问题.
daishaochen的博客
09-27 1305
分析问题的原因：导航栏布局是采用element的响应式布局并且是封装成组件递归调用出来的下级导航栏，方便以后调用接口动态渲染导航栏。问题发现处：可以看出二级导航栏多出有点宽度，样式里面有一个min-width:200px。导航样式默认最小宽度200px。所以后面递归生成的子组件的宽度就成了200px.vue中针对不同的样式类型(css,less,scss)有不用的样式穿透方法。解决办法：由于是递归生成的下级导航栏会出现样式穿透的问题。这样子后面的下级导航栏的宽度就可以改变了！
Qt导航栏Demo之侧边垂直菜单
02-17
Qt自带菜单栏为水平菜单栏，在很多实际应用中，需要用到左侧菜单导航栏，即垂直导航栏，本示例使用QMenu、QDialog、事件过滤、QPushButton、鼠标钩子函数等实现了侧边垂直菜单导航栏。
你的导航栏展开子菜单后为什么会出现宽度多出1px的问题？
Shids_的博客
01-15 1196
你的导航栏展开子菜单后为什么会出现宽度多出1px的问题？
Element UI 导航栏 点击会有1px的突出问题
weixin_55165609的博客
06-03 503
Element UI 导航栏 点击会有1px的突出问题 解决：1把style的scope去掉 2.
解决elementui出现展开后子菜单宽度多出1px问题
Jack_13201的博客
07-28 1204
一：问题现象 二：解决办法 注：在css中加上 .el-menu { // 解决1px elementui出现展开后子菜单宽度多出1px问题 border: none; border-right-width: 0; } 三：解决后效果
问题：Menu二级子菜单 比父级菜单长，该如何修改？
zcp123lc的博客
07-13 994
问题：Menu二级子菜单 比父级菜单长 原因：el-submenu不能修改 需要修改el-submenu子组件el-menu-item宽度 修改方法：在css加上代码: 重新写一个style样式 去掉scoped <style> .el-menu--collapse .el-menu .el-submenu, .el-menu--popup{ min-width: 120px!important; } </style>...
vue+elementui项目折叠菜单再展开有白框问题
Arlisol的博客
01-31 6424
博主在使用vue+elementui实战过程中制作了一个折叠菜单功能，可以把菜单压缩宽度。但是遇到了一个问题，压缩后再展开的菜单显示有问题，会出现一条白框，如图所示： 这是正常的菜单： 这是折叠后的菜单： 这是再展开的菜单： 可见，再展开的菜单宽度变成了折叠菜单的宽度。原因是在布局上没有控制好菜单的宽度，博主找到了两种解决方案分享给大家： 将v-show属性换成v-if属性 &amp;lt;el...
侧边导航栏el-menu 文字溢出问题 CSS一键解决
xiaoleiv9的博客
04-28 1986
换行 未做处理前 做完处理后 CSS代码 <style scped> /* 侧栏导航菜单经典 文字超长溢出问题 CSS折行 */ .el-submenu__title { display: flex; align-items: center; } .el-submenu__title span { white-space: normal; word-break: break-all; line-height: 20px; flex: 1; ..
element-plus侧边导航栏宽度突出一点解决方案
ZYXKN的博客
01-27 244
最近在学习用element-plus搭建我的网站，用到了侧边导航栏，给外层的div设置了高度后发现怎么有突出的地方看起来很不顺眼，一时间以为是卡了又是清缓存，又是重启项目的。后面审查元素发现是element的子元素少了1xp和外层div相差了1px，造成了视觉上突出的效果。然后就是找这个1px到底差在哪，后面找到是发现element给这个el-emnu加上了与一个右边框border，因为边框是算在总宽度里面的嘛，所以就挤压了一点让颜色缩进了一些。
html+css侧边伸缩导航栏
01-26
【html+css】侧边伸缩导航栏
HTML+CSS 侧边展开导航栏.zip
05-09
HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开...
Layui 导航默认展开和菜单栏选中高亮设置的方法
10-16
今天小编就为大家分享一篇Layui 导航默认展开和菜单栏选中高亮设置的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
bootstrap3 侧边导航栏
11-15
这是一个 bootstrap3 的侧边导航栏,东西大家应该都很熟习。希望对大家有所帮助
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1180
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 470
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vue3 vue-draggable-next 实现拖拽穿梭框效果
最新发布
游九尘的博客
06-01 270
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 319
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
html+css侧边导航栏点击后再展开
07-19
### 回答1： 在HTML和CSS中创建一个可以点击后展开的侧边导航栏，可以使用HTML和CSS的结合。 ...然后在这个div中创建一个按钮和一个列表。 按钮可使用一个普通的按钮元素，...其他菜单项没有子菜单，因此没有展开效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值