Why el-menu-item set "float: right" not working?

Question

Framework: Vue3 + Element plus.

I need to set the logout icon to the far right of NavBar.

I try setting "float: right" in the "el-menu-item" or in the "el-icon", but they also don't work.

<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>

Entire Code

<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

I really need help, Thank you!!!

Can you please accept my answer? Thanks! – Tolbxela Nov 12 '21 at 10:55 — Tolbxela, Nov 12 '21 at 10:55

score 0 · Accepted Answer · answered Nov 10 '21 at 10:05

Simple use style='margin-left: auto;' instead of 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>

Why el-menu-item set "float: right" not working?

1 Answers1