如何在SimpleForm中实现标签换行时值与冒号底部垂直对齐

当SimpleForm的标签文本过长换行时，表单值默认会和标签整体居中对齐，需要调整为与标签末尾的冒号底部对齐，同时保留无换行场景和移动端的原有样式，可通过以下CSS方案实现：

核心CSS代码 #

/* 基础表单行布局 */
.form-group {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.5rem; /* 标签与表单控件的间距，可按需调整 */
  width: 100%; /* 确保占满父容器宽度 */
}

/* 移动端适配：恢复上下排列的原有样式 */
@media (max-width: 767px) {
  .form-group {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .control-label {
    margin-bottom: 0.5rem; /* 保持移动端标签与控件的间距 */
  }
}

原理说明 #

• 利用inline-grid布局将标签和表单控件分为两列，align-items: baseline会让表单控件对齐标签文本的基线（即最后一行文本的底部），刚好对应冒号的位置，解决换行时的对齐问题。
• 无换行场景下，单行文本的基线就是行底，控件对齐后与原有居中样式视觉差异极小，不会破坏原有布局。
• 移动端通过媒体查询切换为单列布局，保持标签在上、控件在下的原有样式。

可选优化 #

如果需要统一管理冒号（避免手动在标签文本后添加），可通过伪元素自动添加：

.control-label:after {
  content: ":";
  margin-left: 0.25rem;
}

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