el-menu>中,<el-menu-item>分别有首页、仓库、安装与教程、客服帮助、我的。让前三个菜单实现水平居中,让最后一个靠最右边
时间: 2024-01-27 13:03:51 浏览: 90
可以在 `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` 元素向右对齐。
以下是示例代码:
```html
<el-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>
.el-menu {
display: flex;
justify-content: space-between;
}
.el-menu__item:nth-child(-n+3) {
display: flex;
justify-content: center;
}
.el-menu__item:last-child {
margin-left: auto;
}
</style>
```
使用 `display: flex;` 将 `el-menu` 容器变成 flex 容器,然后使用 `justify-content: space-between;` 将子元素两端对齐。`nth-child(-n+3)` 表示选择前三个元素,使用 `display: flex; justify-content: center;` 将子元素水平居中。最后一个元素使用 `:last-child` 选择器,使用 `margin-left: auto;` 将它向右对齐。
阅读全文