调整Tutor LMS中学生注册表单的布局

你可以通过添加自定义CSS代码实现表单布局优化，无需额外插件。以下是具体实现方案：

核心CSS代码 #

将以下代码添加到WordPress主题自定义izer的「额外CSS」区域（路径：外观 → 自定义 → 额外CSS）：

/* 设置注册表单每行显示2个字段 */
.tutor-registration-form .tutor-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.tutor-registration-form .tutor-form-group {
    flex: 1 1 calc(50% - 10px);
    min-width: 280px; /* 避免窄屏字段过度挤压 */
}

/* 隐藏字段标签 */
.tutor-registration-form .tutor-form-group label {
    display: none;
}

/* 移动端适配：小屏幕恢复每行1个字段 */
@media (max-width: 767px) {
    .tutor-registration-form .tutor-form-group {
        flex: 1 1 100%;
    }
}

代码说明 #

• flex: 1 1 calc(50% - 10px) 让每个字段占据容器一半宽度，减去间距的一半，保证两个字段并排且有合理间隙。
• min-width 确保在窄屏设备上字段不会变形，兼顾移动端体验。
• 若需要将标签文本转为输入框占位符（替代隐藏标签），可额外添加以下可选代码：

  /* 可选：将标签文本转为输入框占位符 */
  .tutor-registration-form .tutor-form-group input::placeholder {
    color: #666;
    font-size: 14px;
  }
  

添加代码后刷新页面，注册表单即可变为每行2个字段且隐藏标签的布局，大幅减少页面滚动需求。

内容的提问来源于stack exchange，提问作者Heba Elkotb