vue 如何实现两个组件在同一行

在 Vue 中，要使两个组件（如 <el-input> 和 <el-button>）并排显示在同一条线上，你可以利用 CSS 的布局属性，最常见的方式是使用 Flexbox 或 Grid 布局。以下是两种实现方法：

方法1: 使用 Flexbox

你可以创建一个包含这两个组件的父容器，并给这个父容器设置 display: flex; 属性，这样它的子元素就会自动沿水平方向排列。

<template>
  <div class="flex-container">
    <el-input ref="authCode" v-model="pwResetForm.authCode" :placeholder="$t('pwReset.authCode')" name="authCode"></el-input>
    <el-button>Submit</el-button>
  </div>
</template>

<style scoped>
.flex-container {
  display: flex;
  /* 可选: 如果需要间距，可以添加 gap 属性 */
  gap: 10px; /* 用于控制组件间的间距 */
}
</style>

方法2: 使用 Grid 布局

另一种方法是使用 CSS Grid，尽管对于只有两个元素并排的情况，Flexbox 更为常用且简洁。

<template>
  <div class="grid-container">
    <el-input ref="authCode" v-model="pwResetForm.authCode" :placeholder="$t('pwReset.authCode')" name="authCode"></el-input>
    <el-button>Submit</el-button>
  </div>
</template>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: auto auto; /* 定义两列 */
  gap: 10px; /* 控制列间距 */
}
</style>

注意事项

• 确保样式正确作用于组件，使用 scoped 属性可以限制样式只在当前组件内生效。
• 根据实际需求调整间距 (gap) 和对齐方式 (justify-content, align-items 等)。
• 如果你的项目中使用了 Element UI 或其他UI框架，它们可能已经提供了内置的栅格系统或工具类来帮助你快速实现这样的布局，记得查阅相关文档。