el-menu>中,<el-menu-item>分别是首页、仓库、安装与教程、客服帮助,要求前四个水平居中且不要让外边距变大。<el-submenu>是我的。靠最右边。
时间: 2024-03-25 10:38:53 浏览: 72
你的问题是关于如何让el-menu中的el-menu-item水平居中且不让外边距变大,并且你的el-submenu要靠最右边。可以采用以下方式实现:
1. 使用flex布局,将el-menu的display属性设置为flex,将justify-content属性设置为center,这将使得el-menu-item水平居中。
2. 为了让外边距不变大,可以将el-menu-item的margin属性设置为0。
3. 将el-submenu的float属性设置为right,这将使得el-submenu靠最右边。
下面是示例代码:
```
<el-menu :default-active="activeIndex" mode="horizontal" class="menu" style="line-height: 60px;display: flex;justify-content: center;">
<el-menu-item index="1" style="margin: 0;">首页</el-menu-item>
<el-menu-item index="2" style="margin: 0;">仓库</el-menu-item>
<el-menu-item index="3" style="margin: 0;">安装与教程</el-menu-item>
<el-menu-item index="4" style="margin: 0;">客服帮助</el-menu-item>
<el-submenu index="5" style="float: right;">
<template slot="title">我的</template>
<el-menu-item index="5-1">个人中心</el-menu-item>
<el-menu-item index="5-2">退出登录</el-menu-item>
</el-submenu>
</el-menu>
```
其中,menu是自定义的样式类,可以根据需要修改。另外,如果还需要调整el-menu-item的垂直居中,可以设置el-menu-item的line-height属性等。
阅读全文
相关推荐











<template> <el-row class="header"> <el-col :span="24"> 后台管理系统 注销 </el-col> </el-row> <el-row class="content"> <el-col :span="6" class="sidebar"> <el-menu :default-active="activeMenu" class="menu"> <el-menu-item index="1"> 首页 </el-menu-item> <el-menu-item index="/category"> 分类管理 <router-link to="/category"> <el-menu-item>分类管理</el-menu-item> </router-link> </el-menu-item> <el-menu-item index="3"> 系统设置 </el-menu-item> </el-menu> </el-col> <el-col :span="18" class="main"> <router-view ></router-view> </el-col> </el-row> <el-row class="footer"> <el-col :span="24"> 版权所有 © 2022 后台管理系统 </el-col> </el-row> </template>还是会跳到新页面








