为啥 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 设置“浮动:正确”不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

el-menu-item默认选中不生效

elementUI 导航栏点击之后改变背景色,背景色悬停

IE7浮动正确问题

如何使用 CSS 使 1 个 div 居中对齐和其他浮动正确 [重复]

el-menu设置面包屑

elementUI的导航栏怎么根据路由默认选中相关项