el-menu>中,<el-menu-item>分别有首页、仓库、安装与教程、客服帮助,<el-submenu>有我的。要求前四个水平居中且间距不要变大,最后一个靠最右边
时间: 2024-03-25 16:38:32 浏览: 91
您可以尝试使用以下 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` 样式来让前四个菜单项水平居中。
相关问题
<el-submenu>中的<el-menu-item>,触发时的颜色如何设置
<-menu-item>触发时的颜色可以通过设置<el-menu-item>的属性"active-text-color"来实现。例如,如果你想要触发时的颜色为红色,可以这样写:
```
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item index="1-1" :active-text-color="'red'">选项1</el-menu-item>
<el-menu-item index="1-2" :active-text-color="'red'">选项2</el-menu-item>
<el-menu-item index="1-3" :active-text-color="'red'">选项3</el-menu-item>
</el-submenu>
```
在这个示例中,当选项被触发时,文字颜色将变为红色。
el-menu>中,<el-menu-item>分别有首页、仓库、安装与教程、客服帮助,<el-submenu>有我的。要求前四个水平居中且不要让外边距变大,最后一个靠最右边。
你可以在 el-menu 标签上添加一个 style 属性,设置其 display 为 flex,justify-content 为 space-between,这样可以使最后一个 el-submenu 靠最右边,然后在每个 el-menu-item 上添加一个 style 属性,将其 flex 属性设置为 1,这样可以使前四个水平居中,同时不会让外边距变大。具体代码如下:
```html
<template>
<el-menu mode="horizontal" style="display: flex; justify-content: space-between;">
<el-menu-item style="flex: 1;">首页</el-menu-item>
<el-menu-item style="flex: 1;">仓库</el-menu-item>
<el-menu-item style="flex: 1;">安装与教程</el-menu-item>
<el-menu-item style="flex: 1;">客服帮助</el-menu-item>
<el-submenu slot="submenu" style="flex: none;" popup-class="my-submenu">
<template slot="title">我的</template>
<el-menu-item>个人中心</el-menu-item>
<el-menu-item>我的订单</el-menu-item>
</el-submenu>
</el-menu>
</template>
<style>
.my-submenu {
width: 150px;
}
</style>
```
你可以根据自己的需要调整 el-submenu 的宽度(这里设置为 150px)。