el-row格栅不在一行显示

Question

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <ul>
          <li>
            <el-link>登录</el-link>
          </li>
          <li>
            <el-link>注册</el-link>
          </li>
          <li>
            <el-link href="/personcenter">个人中心</el-link>
          </li>
          <li>
            <el-link :underline="false">注销</el-link>
          </li>
        </ul>
      </el-col>
    </el-row>
    <el-row >
      <el-col :span="1">
        <el-link :underline="false" href="/">
          <el-image id="homelog" src="/favicon.ico" fit="contain" />
        </el-link>
      </el-col>
      <el-col :span="1">
        <el-input
          class="w-50 m-2"
          style="margin-top: 30px"
          size="large"
          placeholder="商品搜索"
          :suffix-icon="Search"
        />
      </el-col>
      <el-col :span="1">
        <div class="service-item">
          <a id="header-chat" href="javascript:void(0);">
            <span class="icon icon-headset"></span>
            <span class="service-item-info">在线客服</span>
          </a>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script >
// import LoginCom from "./LoginCom.vue";
// import RegisterCom from "./RegisterCom.vue";
// import { useStore } from 'vuex'
// const store = useStore()
// const OpenLogin = () => {
//   store.commit('OpenLogin')
// }
// const OpenRegister = () => {
//   store.commit('OpenRegister')
// }
// const LogOut=()=>{
//   //清理vuex状态 //清理localStorage
//   localStorage.removeItem('NickName');
//   localStorage.removeItem('token');
//   store.commit('SettingNickName', undefined)
// }
</script>

<style lang="scss">
ul {
  list-style: none;
  padding-left: 80%;
  li {
    float: left;
    margin-left: 20px;
  }
}
.service-item {
  display: inline-block;
  font-size: 14px;
  color: #71797f;
  vertical-align: top;
  line-height: 47px;
  margin-top: 25px;
  margin-left: -200px;
  a {
    text-decoration: none;
    color: inherit;
  }
  .icon-headset {
    background-position: -34px -102px;
    width: 24px;
    height: 24px;
    margin-top: 12px;
    margin-right: 8px;
    display: inline-block;
    background-image: url(//localhost:8080/images/common_sprite.png);
    background-repeat: no-repeat;
    vertical-align: top;
  }
}
.el-menu-header {
  margin-left: 30% !important;
  border-bottom: 0px !important;
  .el-menu-item {
    width: 170px !important;
  }
}

#homelog {
  width: 200px;
  height: 100px;
}
</style>

这段里面第二个elrow 三个格栅不在一行显示 是什么原因呀\求帮助

Answer 1

qq_39064436 上午好☀️☀️☀️️
本答案参考通义千问

<template>
  ...
  <el-row>
    <el-col :span="1" :gutter="20" v-for="(item, index) in [1, 1, 1]" :key="index">
      ...
    </el-col>
  </el-row>
  ...
</template>

问题在于el-row的列没有正确设置gutter（间距）属性，这可能导致列之间的间距过大，使得它们无法在一行显示。为了解决这个问题，你需要在el-col中添加gutter属性，并确保它具有合适的值。这里我假设你想要每个格栅之间有20px的间距，所以我在v-for循环中为每个el-col添加了:gutter="20"。

解决方案：

1. 在el-row中使用v-for循环，为每个el-col分配适当的span和gutter值。
2. 修改el-col的span属性，例如将span="1"改为span="1"的循环形式，如<el-col :span="1" :gutter="20" v-for="(item, index) in [1, 1, 1]" :key="index"></el-col>，这样可以确保每个元素都占据一行并保持间距。

代码修改如下：

<template>
  ...
  <el-row>
    <el-col :span="1" :gutter="20" v-for="(item, index) in [1, 1, 1]" :key="index">
      <el-col :span="item" class="your-custom-class"> <!-- 如果需要添加额外样式 -->
        <ul>
          <li>
            ...
          </li>
        </ul>
      </el-col>
    </el-col>
  </el-row>
  ...
</template>

确保将<el-col>的class属性替换为你可能需要的自定义样式。这样，三个el-col应该会在一行上显示，并且间距为20px。