Element UI组件对齐的问题
如图，我希望导航菜单向右对齐，我尝试过justify="end"、text-align: right，但都不行，请各位大哥指教。<!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> 虽然我是Java，但elementUI略懂一点，在el-row标签里面添加属性<el-row type="flex" justify="end"> </el-row>即可 这个确实不会用的 本帖最后由 cqwcns 于 2019-10-27 15:19 编辑
mi0070 发表于 2019-10-27 09:50
虽然我是Java，但elementUI略懂一点，在el-row标签里面添加属性即 ...
大哥好，并不行，麻烦再帮忙看看
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" >
<!-- CSS CDN：https://unpkg.com/element-ui/lib/theme-chalk/index.css -->
<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 type="flex" justify="end">
<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> 本帖最后由 mi0070 于 2019-10-28 08:38 编辑
cqwcns 发表于 2019-10-27 15:14
大哥好，并不行，麻烦再帮忙看看
设置一下span的布局比例就可以了，因为你用的是el-col标签，所以el-row标签可以不用了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" >
<!-- CSS CDN：https://unpkg.com/element-ui/lib/theme-chalk/index.css -->
<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="17">
<div class="el-menu-demo text">Logo</div>
</el-col>
<el-col :span="7">
<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> 这 mi0070 发表于 2019-10-28 08:37
设置一下span的布局比例就可以了，因为你用的是el-col标签，所以el-row标签可以不用了
这样不行，导航菜单的按钮数量会增减，不可能每次增减都调整span值{:301_972:} wuwangxu 发表于 2019-10-28 11:11
这
你好，基本可以解决，但由于浮动的关系，导致元素顺序反转了，不知道有没有更好的办法。
cqwcns 发表于 2019-10-28 13:11
你好，基本可以解决，但由于浮动的关系，导致元素顺序反转了，不知道有没有更好的办法。
我没用过element-ui
但是一般的盒模型处理方式是将这三个元素包含在一个div中然后设置div的float:right; cqwcns 发表于 2019-10-28 13:11
你好，基本可以解决，但由于浮动的关系，导致元素顺序反转了，不知道有没有更好的办法。
改变这三个元素的父级右浮动，这三个元素左浮动，然后父级的宽度根据三个元素动态改变就行了
页:
[1]
2