el-menu>中,<el-menu-item>分别有首页、仓库、安装与教程、客服帮助,<el-submenu>有我的。要求前四个水平居中且不要让外边距变大,最后一个靠最右边。
时间: 2024-03-25 12:38:46 浏览: 110
你可以在 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)。
阅读全文