ElementUI :右边的子菜单出现截断(CSS)
提问于 2017-10-17 06:50:47
我需要导航栏的右上角菜单。但在鼠标上方，子菜单似乎被截断在窗口上方。
如何使子菜单的右侧出现在窗口边框旁边？
new Vue({
el: '#app'
});<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"></script>
<div id="app">
<el-menu class="el-menu" mode="horizontal">
<el-submenu index="4" style="float: right;">
<template slot="title"><i class="el-icon-menu"></i></template>
<el-menu-item index="4-1"><i class="el-icon-setting"></i> Settings</el-menu-item>
<el-menu-item index="4-2"><i class="el-icon-information"></i> About</el-menu-item>
<el-menu-item index="4-3"><i class="el-icon-circle-close"></i> Logout</el-menu-item>
</el-submenu>
</el-menu>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-17 07:05:26
您可以更改css中菜单的位置属性。重置left值，并添加right: 0
new Vue({
el: '#app'
});.el-menu--horizontal .el-submenu > .el-menu {
left: initial !important;
right: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"></script>
<div id="app">
<el-menu class="el-menu" mode="horizontal">
<el-submenu index="4" style="float: right;">
<template slot="title"><i class="el-icon-menu"></i></template>
<el-menu-item index="4-1"><i class="el-icon-setting"></i> Settings</el-menu-item>
<el-menu-item index="4-2"><i class="el-icon-information"></i> About</el-menu-item>
<el-menu-item index="4-3"><i class="el-icon-circle-close"></i> Logout</el-menu-item>
</el-submenu>
</el-menu>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46793057
复制相关文章
点击加载更多
腾讯云开发者
