内联表单el-form对齐

要使内联表单 (el-form) 中的内容对齐，你可以使用 Element UI 提供的布局类和样式来控制其排列。以下是一个示例：

<template>
  <el-form class="inline-form" inline>
    <el-form-item label="Name:">
      <el-input v-model="name"></el-input>
    </el-form-item>

    <el-form-item label="Email:">
      <el-input v-model="email"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    submitForm() {
      // 提交表单逻辑
    }
  }
};
</script>

<style scoped>
.inline-form .el-form-item {
  display: inline-block;
  margin-right: 20px; /* 调整右边距以适应你的需求 */
}

.inline-form .el-button {
  margin-left: 20px; /* 调整左边距以适应你的需求 */
}
</style>

上述代码中，我们使用了 Element UI 的 `inline` 属性使表单内容在同一行显示。通过给 `.el-form-item` 添加 `display: inline-block` 和调整右边距，可以将表单项对齐在一起。同样，通过调整 `.el-button` 的左边距，可以控制按钮与其他表单项的对齐。你可以根据实际需求调整样式和间距，以达到对齐的效果。