el-menu>中,<el-menu-item>分别有首页、仓库、安装与教程、客服帮助,<el-submenu>有我的。要求前四个水平居中且间距不要变大,最后一个靠最右边
时间: 2024-03-25 08:38:32 浏览: 153
vue2+el-menu实现路由跳转及当前项的设置方法实例
您可以尝试使用以下 CSS 代码来实现:
```css
.el-menu {
display: flex;
justify-content: space-between;
}
.el-menu-item:not(:last-child),
.el-submenu {
margin-right: 10px;
}
.el-submenu:last-child {
margin-right: 0;
}
.el-menu-item-group {
display: flex;
justify-content: center;
}
```
这里的关键是将菜单容器 `.el-menu` 的显示设置为 `flex`,并使用 `justify-content: space-between` 属性来让前四个菜单项水平居中,同时第五个菜单项靠最右边。然后使用 `margin-right` 属性来控制每个菜单项之间的间距。最后,使用 `.el-menu-item-group` 样式来让前四个菜单项水平居中。
阅读全文