如图，我希望导航菜单向右对齐，我尝试过justify="end"、text-align: right，但都不行，请各位大哥指教。
[HTML] 纯文本查看 复制代码 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/laobao.css">
<!-- element -->
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-header>
<el-row>
<el-col :span="4">
<div class="el-menu-demo text">Logo</div>
</el-col>
<el-col :span="20">
<el-menu
:default-active="activeIndex2"
class="el-menu-demo text"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" >消息中心</el-menu-item>
<el-menu-item index="4">订单管理</el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-header>
</div>
</body>
<script>
var Main = {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</html> | 
发表于 2019-10-27 08:51
|
发表于 2019-10-27 15:14
