<span> <label for="gender-input">邮箱：</label> <!-- <div style="text-align:center;"> 邮箱 --> <input type="text" id="email" placeholder="请输入邮箱" class="form-control" style="width: 50%; display: block; margin: 0 auto;" maxlength="5"> <!-- </div> --> </span>无法在同一行输出

这段 HTML 代码中，邮箱的输入框前面有一个 label 标签，如果想要在同一行输出，可以使用 CSS 设置 label 和 input 的 display 属性为 inline 或 inline-block。具体做法如下：

label {
  display: inline-block;
  vertical-align: middle;
}

input {
  display: inline-block;
  width: 50%;
  margin: 0 auto;
}

其中，vertical-align 属性设置 label 标签在垂直方向上与 input 输入框对齐。另外，为了使输入框在水平方向上居中，可以使用 margin: 0 auto;。

相关问题

用elementUI写一个员工信息管理系统UI，包括对员工信息的ID、name、gender、address、phone、photo、date的增删改查功能，还有员工详情弹窗展示

好的，下面是一个简单的示例代码，使用Element UI来实现员工信息管理系统的UI。你可以根据自己的需求进行修改和扩展。

<template>
  <div>
    <!-- 员工列表 -->
    <el-table :data="employees" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="showEmployeeDetails(scope.row)">详情</el-button>
          <el-button @click="deleteEmployee(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增员工 -->
    <el-dialog title="新增员工" :visible.sync="addDialogVisible">
      <!-- 表单内容 -->
      <el-form :model="newEmployee" label-width="80px">
        <el-form-item label="ID">
          <el-input v-model="newEmployee.id"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="newEmployee.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="newEmployee.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="newEmployee.address"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="newEmployee.phone"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="newEmployee.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>

      <!-- 按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addEmployee">确定</el-button>
      </div>
    </el-dialog>

    <!-- 员工详情弹窗 -->
    <el-dialog title="员工详情" :visible.sync="detailsDialogVisible">
      <el-row>
        <el-col :span="6">ID：</el-col>
        <el-col :span="18">{{ selectedEmployee.id }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">姓名：</el-col>
        <el-col :span="18">{{ selectedEmployee.name }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">性别：</el-col>
        <el-col :span="18">{{ selectedEmployee.gender }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">地址：</el-col>
        <el-col :span="18">{{ selectedEmployee.address }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">电话：</el-col>
        <el-col :span="18">{{ selectedEmployee.phone }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">日期：</el-col>
        <el-col :span="18">{{ selectedEmployee.date }}</el-col>
      </el-row>

      <!-- 按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 按钮 -->
    <div style="margin-top: 20px;">
      <el-button type="primary" @click="addDialogVisible = true">新增员工</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employees: [
        {
          id: 1,
          name: '张三',
          gender: '男',
          address: '北京市',
          phone: '1234567890',
          date: '2022-01-01'
        },
        {
          id: 2,
          name: '李四',
          gender: '女',
          address: '上海市',
          phone: '0987654321',
          date: '2022-02-02'
        }
      ],
      newEmployee: {
        id: '',
        name: '',
        gender: '',
        address: '',
        phone: '',
        date: ''
      },
      addDialogVisible: false,
      detailsDialogVisible: false,
      selectedEmployee: {}
    };
  },
  methods: {
    addEmployee() {
      // 表单校验
      if (!this.newEmployee.id || !this.newEmployee.name || !this.newEmployee.gender || !this.newEmployee.address || !this.newEmployee.phone || !this.newEmployee.date) {
        this.$message.error('请填写完整的员工信息');
        return;
      }

      // 添加员工
      this.employees.push({...this.newEmployee});
      this.$message.success('添加成功');
      this.addDialogVisible = false;

      // 清空表单
      this.newEmployee = {
        id: '',
        name: '',
        gender: '',
        address: '',
        phone: '',
        date: ''
      };
    },
    showEmployeeDetails(employee) {
      this.selectedEmployee = employee;
      this.detailsDialogVisible = true;
    },
    deleteEmployee(employee) {
      const index = this.employees.findIndex(e => e.id === employee.id);
      if (index > -1) {
        this.employees.splice(index, 1);
        this.$message.success('删除成功');
      }
    }
  }
};
</script>

<style>
.dialog-footer {
  text-align: center;
}
</style>

这是一个简单的员工信息管理系统的UI示例，使用了Element UI的表格、对话框等组件，实现了对员工信息的增删改查功能，以及员工详情的弹窗展示。你可以根据自己的需求进行修改和扩展。