React.js开发中如何实现单标签内部内容的等间距对齐？

你之前用的text-indent是首行文本缩进属性，justify-content: space-between是弹性盒容器专属属性，直接加在非弹性容器的元素上不会生效。你可以通过修改结构加弹性盒/网格布局实现对齐效果，具体操作如下：

第一步：修改JSX结构 #

删掉所有用于换行的<br/>，把每一行的标签和内容单独放在一个容器内，示例代码如下：

<div className="AddItemDiv">
  <div className="form-row">
    <span className="label">工单编号:</span>
    <strong>170</strong>
  </div>
  <div className="form-row">
    <span className="label">问题描述:</span>
    <strong>无法登录库存系统</strong>
  </div>
  <div className="form-row">
    <span className="label">处理状态:</span>
    <select>
      <option selected value="">选项一</option>
      <option value="">选项二</option>
      <option value="">选项三</option>
      <option value="">选项四</option>
    </select>
  </div>
  <div className="form-row">
    <span className="label">负责人:</span>
    <select>
      <option selected value="">选项一</option>
      <option value="">选项二</option>
      <option value="">选项三</option>
      <option value="">选项四</option>
    </select>
  </div>
  <div className="form-row">
    <span className="label">备注:</span>
    <input type="text" name="name" />
  </div>
</div>

第二步：添加对应CSS样式 #

你可以任选以下两种方案之一实现对齐：

方案1：弹性盒布局（兼容性更好）

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.label {
  /* 可根据实际需求调整宽度 */
  width: 90px;
  text-align: right;
  margin-right: 12px;
}

方案2：网格布局（代码更简洁，不需要单独控制行容器）

.AddItemDiv {
  display: grid;
  /* 第一列宽度自适应内容，第二列占剩余空间 */
  grid-template-columns: auto 1fr;
  /* 第一个值是行间距，第二个值是列间距 */
  gap: 24px 12px;
  align-items: center;
}

使用网格布局时不需要额外给.form-row加样式，也不需要给label写死宽度，所有标签会自动根据最长内容对齐。

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