vue vue-element-ui组件 el-menu高度设置

最新推荐文章于 2025-06-18 14:39:56 发布

我先来一碗

最新推荐文章于 2025-06-18 14:39:56 发布

阅读量9.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： ElementUI 文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/jack_bob/article/details/125867461

ElementUI 专栏收录该内容

2 篇文章

订阅专栏

本文展示了如何通过CSS样式设置实现Element UI的水平导航菜单，使得菜单项和子菜单项的高度统一为50px，并提供了HTML代码示例。这个菜单可以应用于网页的头部导航，提供清晰的水平布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平展示：

外面包个div，再设置属性：
代码示例：

  .home-header-menu .el-menu--horizontal>.el-menu-item {
    height: 50px;
    line-height: 50px;
  }
  .home-header-menu .el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 50px;
    line-height: 50px;
  }

<!-- 水平展示 -->
          <div class="homeHeader-menus-bg" style="margin-top:0px;">
            <el-menu  router class="el-menu-demo" background-color="#0f3365" text-color="#fff" active-text-color="#ffd04b" mode="horizontal" @select="handleSelect">
              <el-submenu background-color="#545c64" text-color="#ffffff" active-text-color="#409EFF" :index="index + ''"
                        v-for="(item, index) in routes" :key="index">
                        <template slot="title">
                          <i :class="item.iconcls" style="margin-right:10px;color:#0f3365"></i>
                          <span>{{ item.name }}</span>
                        </template>
                        <el-menu-item :index="children.path" v-for="(children, indexj) in item.children" :key="indexj">
                          {{ children.name }}
                        </el-menu-item>
              </el-submenu>
            </el-menu>
          </div>