Element UI组件对齐的问题

cqwcns · 发表于 2019-10-27 08:51

如图，我希望导航菜单向右对齐，我尝试过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>

mi0070 · 发表于 2019-10-27 09:50

虽然我是Java，但elementUI略懂一点，在el-row标签里面添加属性

[HTML] 纯文本查看 复制代码

<el-row type="flex" justify="end"> </el-row>

即可

wobzhidao · 发表于 2019-10-27 10:36

这个确实不会用的

cqwcns · 发表于 2019-10-27 15:14

本帖最后由 cqwcns 于 2019-10-27 15:19 编辑

mi0070 发表于 2019-10-27 09:50
虽然我是Java，但elementUI略懂一点，在el-row标签里面添加属性即 ...

大哥好，并不行，麻烦再帮忙看看

代码：

[HTML] 纯文本查看 复制代码

<!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:37

本帖最后由 mi0070 于 2019-10-28 08:38 编辑

cqwcns 发表于 2019-10-27 15:14
大哥好，并不行，麻烦再帮忙看看

设置一下span的布局比例就可以了，因为你用的是el-col标签，所以el-row标签可以不用了

[HTML] 纯文本查看 复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" >
<!-- CSS CDN：[url=https://unpkg.com/element-ui/lib/theme-chalk/index.css]https://unpkg.com/element-ui/lib/theme-chalk/index.css[/url] -->
<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>

wuwangxu · 发表于 2019-10-28 11:11

这

cqwcns · 发表于 2019-10-28 12:50

mi0070 发表于 2019-10-28 08:37
设置一下span的布局比例就可以了，因为你用的是el-col标签，所以el-row标签可以不用了
[mw_shl_code=htm ...

这样不行，导航菜单的按钮数量会增减，不可能每次增减都调整span值

cqwcns · 发表于 2019-10-28 13:11

wuwangxu 发表于 2019-10-28 11:11
这

你好，基本可以解决，但由于浮动的关系，导致元素顺序反转了，不知道有没有更好的办法。
微信图片_20191028131257.png

yujun199901 · 发表于 2019-10-28 16:37

cqwcns 发表于 2019-10-28 13:11
你好，基本可以解决，但由于浮动的关系，导致元素顺序反转了，不知道有没有更好的办法。

我没用过element-ui
但是一般的盒模型处理方式是将这三个元素包含在一个div中然后设置div的float:right;

mi0070 · 发表于 2019-10-28 22:08

cqwcns 发表于 2019-10-28 13:11
你好，基本可以解决，但由于浮动的关系，导致元素顺序反转了，不知道有没有更好的办法。

改变这三个元素的父级右浮动，这三个元素左浮动，然后父级的宽度根据三个元素动态改变就行了

帐号		自动登录	找回密码
密码			注册[Register]

[求助] Element UI组件对齐的问题

免费评分

个人中心