如何将所有item-title元素宽度设为列表中最长元素的宽度？

安全阿岳

2026-8-12

实现动态列表项标题宽度统一与按钮对齐的方案

针对Vue动态生成的列表，要让所有item-title自动匹配最长项的宽度，从而让按钮水平对齐，以下是两种纯CSS的实现方案：

方案一：CSS Grid布局（推荐）

利用Grid的列自适应特性，让标题列自动适配最长内容的宽度，按钮列仅占用自身所需空间。

/* 列表容器设为Grid布局 */
.list {
  display: grid;
  /* 第一列自适应最长标题宽度，第二列适配按钮宽度 */
  grid-template-columns: auto min-content;
  align-items: center; /* 垂直居中对齐元素 */
  gap: 12px; /* 标题与按钮的间距，可按需调整 */
}

/* 让列表项的子元素直接成为Grid容器的项目，忽略自身容器 */
.list-item {
  display: contents;
}

/* 可选：若需限制标题不换行，超出显示省略号 */
.item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

优势

完全基于CSS实现，无需JavaScript计算宽度
自动适配动态生成的列表项，新增/删除项时宽度会自动更新
布局灵活，可轻松调整间距和对齐方式

方案二：CSS Table布局

利用表格布局天然的同列宽度一致特性，实现标题和按钮的对齐。

/* 列表容器设为表格 */
.list {
  display: table;
  border-collapse: separate;
  border-spacing: 12px 8px; /* 水平间距（标题-按钮）、垂直间距（行与行） */
}

/* 列表项设为表格行 */
.list-item {
  display: table-row;
}

/* 标题和按钮设为表格单元格 */
.item-title, .item-button {
  display: table-cell;
  vertical-align: middle; /* 垂直居中对齐 */
}

/* 禁止标题换行，确保宽度统一 */
.item-title {
  white-space: nowrap;
}