为啥 el-menu-item 设置“浮动:正确”不起作用?
Posted
技术标签:
【中文标题】为啥 el-menu-item 设置“浮动:正确”不起作用?【英文标题】:Why el-menu-item set "float: right" not working?为什么 el-menu-item 设置“浮动:正确”不起作用? 【发布时间】:2021-12-20 13:47:18 【问题描述】:框架:Vue3 + Element plus。
我需要将注销图标设置在 NavBar 的最右侧。
我尝试在“el-menu-item”或“el-icon”中设置“float: right”,但它们也不起作用。
<el-menu-item style="float: right;">
<el-icon v-on:click="logout" style="font-size: 30px;color: #222;padding-top: 8px;">
<i-switch-button />
</el-icon>
</el-menu-item>
<el-menu-item>
<el-icon v-on:click="logout" style="float: right;font-size: 30px;color: #222;padding-top: 8px;">
<i-switch-button />
</el-icon>
</el-menu-item>
完整代码
<div>
<el-menu
:default-active="'/index'"
router
mode="horizontal"
background-color="white"
text-color="#222"
active-text-color="red"
style="min-width: 1300px"
>
<el-menu-item v-for="(item,index) in navList" :key="index" :index="item.name">
item.navItem
</el-menu-item>
<el-menu-item style="float: right;">
<el-icon v-on:click="logout" style="font-size: 30px;color: #222;padding-top: 8px;">
<i-switch-button />
</el-icon>
</el-menu-item>
</el-menu>
</div>
This is the current situation
我真的需要帮助,谢谢!!!
【问题讨论】:
您能接受我的回答吗?谢谢! 【参考方案1】:简单地使用style='margin-left: auto;'
代替style="float: right;"
var Main =
data()
return
navList: [ name: 'item1', navItem: 'Link 1']
,
methods:
logout()
;
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");
<html>
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/theme-chalk/index.css">
</head>
<body>
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus/dist/index.full.js"></script>
<div id="app">
<el-menu
:default-active="'/index'"
router
mode="horizontal"
background-color="white"
text-color="#222"
active-text-color="red">
<el-menu-item v-for="(item,index) in navList" :key="index" :index="item.name">
item.navItem
</el-menu-item>
<el-menu-item v-on:click="logout" style='margin-left: auto;'>
Logout
</el-menu-item>
</el-menu>
</div>
</body>
</html>
【讨论】:
成功了,谢谢!!!以上是关于为啥 el-menu-item 设置“浮动:正确”不起作用?的主要内容,如果未能解决你的问题,请参考以下文章