el-menu>中,<el-menu-item>分别有首页、仓库、安装与教程、客服帮助、我的。让前三个菜单实现水平居中且它们之间的间距不要变大,让最后一个靠最右边,
时间: 2024-03-25 17:38:27 浏览: 24
您可以在 `el-menu` 组件上使用 `mode="horizontal"` 属性来设置菜单水平显示,然后使用 CSS 属性 `display: flex; justify-content: space-between;` 将菜单容器设置为两端对齐,同时使用 `display: flex; justify-content: center;` 将前三个 `el-menu-item` 元素设置为水平居中,使用 `margin-left: auto;` 将最后一个 `el-menu-item` 元素向右对齐。接着,可以使用 `width` 属性来设置菜单项的宽度,从而让它们之间的间距不变大。
以下是示例代码:
```html
<el-menu mode="horizontal" class="menu">
<el-menu-item index="1" class="menu-item">首页</el-menu-item>
<el-menu-item index="2" class="menu-item">仓库</el-menu-item>
<el-menu-item index="3" class="menu-item">安装与教程</el-menu-item>
<el-menu-item index="4" class="menu-item">客服帮助</el-menu-item>
<el-menu-item index="5" class="menu-item">我的</el-menu-item>
</el-menu>
<style>
.menu {
display: flex;
justify-content: space-between;
}
.menu-item {
width: calc((100% - 190px) / 3); /* 190px是前三个菜单项的总宽度 */
display: flex;
justify-content: center;
}
.menu-item:last-child {
margin-left: auto;
}
</style>
```
使用 `display: flex;` 将 `el-menu` 容器变成 flex 容器,然后使用 `justify-content: space-between;` 将子元素两端对齐。为了让前三个菜单项居中,我们使用 `.menu-item` 来选择菜单项,并使用 `display: flex; justify-content: center;` 将子元素水平居中,同时使用 `width` 属性来设置菜单项的宽度,从而让它们之间的间距不变大。最后一个元素使用 `:last-child` 选择器,使用 `margin-left: auto;` 将它向右对齐。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<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>还是会跳到新页面
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)