el-menu>中,<el-menu-item>分别有首页、仓库、安装与教程、客服帮助、我的。让前三个菜单实现水平居中.。mode="horizontal"报错
时间: 2024-03-25 16:38:21 浏览: 130
水平滑动的菜单
如果您在使用 `mode="horizontal"` 属性时遇到报错,可能是因为该属性是在 Element UI 版本 2.0.0 及以上才支持的。
请确保您的 Element UI 版本符合要求。如果版本正确,您可以尝试以下代码:
```html
<el-menu class="menu" mode="horizontal">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">仓库</el-menu-item>
<el-menu-item index="3">安装与教程</el-menu-item>
<el-menu-item index="4">客服帮助</el-menu-item>
<el-menu-item index="5">我的</el-menu-item>
</el-menu>
<style>
.menu {
display: flex;
justify-content: center;
}
.menu .el-menu__item:nth-child(n+4) {
margin-left: auto;
}
</style>
```
在 `el-menu` 组件上使用 `class="menu"` 属性来设置样式名称,然后使用 CSS 属性 `display: flex; justify-content: center;` 将菜单容器设置为水平居中。
为了让前三个菜单项居中,我们使用 `.menu .el-menu__item:nth-child(n+4)` 来选择第四个菜单项及其后面的所有菜单项,并使用 `margin-left: auto;` 来将它们向右对齐。
希望这能帮到您。
阅读全文