元素菜单用户界面的中心子菜单

问题描述

我在Vue的Element UI中设置了一个菜单。

子菜单下拉菜单在如何控制菜单下拉位置方面具有一些奇怪的配置。引导程序设置本身使菜单下拉，其左侧与子菜单标题的左侧对齐。

但是，我希望该子菜单出现在标题的中心，而不是左对齐。

我在网上发现典型的解决方案是在CSS中执行以下操作：

.dropdown-menu-center {
 left: 50% !important;
 right: auto !important;
 text-align: center !important;
 transform: translate(-50%,0) !important;
}

但是，如果执行此操作，则下拉列表将完全显示在标题的左侧，如下所示：

我想知道Element UI在这里如何工作，如何重置属性使其像基本CSS一样起作用？困惑如何解决这个问题。

通用代码如下：

<template>
<el-menu
    class="default-menu"
    v-bind="$attrs"
    text-color="#333"
    active-text-color="#333"
    :default-active="defaultActiveIndex"
    @select="handleSelect"
    menu-trigger="hover"
>
    <el-submenu class="navigation-item" index="xxx" :popper-append-to-body="true">
        <template slot="title">Title</template>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <div class="dropdown-menu-divider" />
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
    </el-submenu>
    <el-submenu class="navigation-item" index="xxx" :popper-append-to-body="true">
        <template  slot="title">Title2</template>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">Submenu item</a>
        </el-menu-item>
        <el-menu-item>
            <a href="xxx" target="_blank">
                Submenu item
            </a>
        </el-menu-item>
    </el-submenu>
    </el-menu>
   </template>

将分配给“弹出”菜单的CSS设置为：

.el-menu--horizontal ul.el-menu.el-menu--popup.el-menu--popup-bottom-start {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%,0) !important;
    text-align: left;
    display: block !important;
    position: absolute !important;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html vue.js