如何让列表的字段名称区域保持相同宽度（非表格实现）

可以通过CSS Grid或Flexbox结合动态计算两种方式实现，无需转为表格，以下是具体方案：

方案一：CSS Grid（推荐，纯CSS实现） #

Grid布局天然支持列宽统一，只需调整容器和子元素的布局规则即可：

修改后的CSS代码 #

ul {
  margin-bottom: 0;
  display: grid;
  /* 第一列适配最宽的字段名，第二列占满剩余空间 */
  grid-template-columns: max-content 1fr;
  row-gap: 5px;
}

li {
  /* 让li的子元素直接成为Grid的列项，忽略li本身的布局 */
  display: contents;
  padding: 5px 0;
}

li:not(:last-child) {
  /* 让分隔线跨两列显示 */
  border-bottom: 1px solid black;
  grid-column: 1 / -1;
}

.field {
  padding-right: 8px;
  /* 让字段名与值的顶部对齐 */
  align-self: start;
}

.value {
  /* 替代<br>，让每个值独占一行，更符合语义 */
  display: block;
}

原理说明 #

• grid-template-columns: max-content 1fr 定义两列，第一列宽度由最宽的.field元素决定，所有行的第一列会自动同步这个宽度；
• display: contents 让<li>不参与Grid布局，直接将内部的.field和.value作为Grid的列项；
• 分隔线通过grid-column: 1 / -1跨两列，保证横线贯穿整个列表宽度。

方案二：Flexbox + 动态计算（兼容旧浏览器） #

如果需要兼容不支持Grid的旧环境，可以用JS计算所有字段名的最大宽度，再通过CSS变量同步给所有.field元素：

步骤1：添加Angular组件逻辑 #

import { AfterViewInit, Component } from '@angular/core';

@Component({
  // 你的组件元数据（selector、template等）
})
export class YourComponent implements AfterViewInit {
  list = { /* 你的字段列表数据 */ };

  ngAfterViewInit(): void {
    const fieldElements = document.querySelectorAll('.field');
    let maxWidth = 120; // 初始最小宽度
    fieldElements.forEach(el => {
      maxWidth = Math.max(maxWidth, (el as HTMLElement).offsetWidth);
    });
    // 将最大宽度设置为全局CSS变量
    document.documentElement.style.setProperty('--field-width', `${maxWidth}px`);
  }
}

步骤2：修改CSS代码 #

ul {
  margin-bottom: 0;
}

li {
  padding: 5px 0;
  display: flex;
  align-items: flex-start; /* 字段名与值顶部对齐 */
  
  &:not(:last-child) {
    border-bottom: 1px solid black;
  }
}

.field {
  /* 使用计算出的最大宽度，默认120px */
  width: var(--field-width, 120px);
  padding-right: 8px;
  flex-shrink: 0; /* 禁止字段名被压缩 */
}

原理说明 #

• JS在视图初始化后遍历所有.field元素，计算出最大宽度并设置为CSS变量；
• flex-shrink: 0 确保字段名不会被Flex容器压缩，保持计算出的宽度；
• 所有.field共享同一个CSS变量值，实现宽度统一。

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