label和输入框在同一水平线上

要让`<label>`和输入框在同一水平线上，可以使用CSS的Flexbox布局。在`.form-group`容器中添加`display: flex;`以及适当的align-items属性，例如：

.form-group {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  margin-bottom: 1rem;
}

这里的`align-items: baseline;`会使所有行基础线（包括文本底部线）对齐，而`flex-direction: row;`则沿水平方向（从左到右）排列元素。

另外，如果你希望`label`始终占满剩余的空间直到`input`旁边，可以尝试这样设置：

label {
  flex-grow: 1;
  text-align: left;
  margin-right: 0.5rem;
  /* 如果需要限制宽度，可以添加max-width: 100%; */
}

这会使得`label`随着窗口大小调整而自动扩展，同时保持与输入框紧密相邻。

相关问题

el-switch 和其它表单对齐

`el-switch` 是 Element UI 中的一个组件，它是一个二选一的选择开关，常用于表示选择状态的切换。在 Vue.js 的前端开发中，`el-switch` 通常与其他表单元素一起使用，如 `el-form` 表单组件。为了保持美观和一致性，你可以通过以下几个方面来对齐表单控件：

1. **样式管理**：利用 CSS 样式来控制 `el-switch` 的间距和行高，使其与文本输入框、按钮等其他表单元素在同一水平线上。可以设置容器的 `display`, `flex` 或 `grid` 属性，并调整 `justify-content` 或 `align-items`。

<div class="form-container">
  <el-form label-width="80px">
    <el-form-item label="开关">
      <el-switch v-model="switchValue" size="small"></el-switch>
    </el-form-item>
    <el-form-item label="文本输入">
      <input type="text" placeholder="请输入内容...">
    </el-form-item>
  </el-form>
</div>

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 或者 justify-content: space-between */
}

2. **布局结构**：如果使用自定义模板，可以使用 Flexbox 或 Grid 等布局工具来组织控件，确保它们在响应式设计下始终对齐。

3. **Vue 插槽（Slot）**：如果你希望 `el-switch` 更紧密地集成到表单中，可以考虑使用插槽功能将其他元素放在其内部，这样整个组件会保持一致的对齐。

记得在实际应用中，还要根据设计规范和个人项目的要求来调整对齐方式。