如何让并排的不同列表<li>项高度一致？HTML CSS

针对你用PHP循环生成的多列表，要让对应位置的<li>高度统一，这里提供几种实用方案：

方法1：CSS Grid布局（推荐，纯CSS无JS） #

这种方案利用Grid的自动行高特性，能自动让同一行的所有<li>取最高元素的高度，无需手动计算。

调整后的HTML结构（把列表放进统一的Grid容器） #

<div class="list-grid">
  <div class="table-1">
    <ul>
      <li>short text1</li>
      <li>short text1</li>
      <li>long text1 long text1 long text1 long text1 long text1 long text1 </li>
      <li>short text1</li>
    </ul>
  </div>
  <div class="table-2">
    <ul>
      <li>short text2</li>
      <li>long text2 long text2 long text2 long text2 long text2 long text2 </li>
      <li>short text2</li>
      <li>short text2</li>
      <li>short text2</li>
    </ul>
  </div>
</div>

对应CSS代码 #

/* 外层Grid容器，控制列布局 */
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列宽，可按需调整 */
  gap: 20px; /* 列之间的间距 */
}

/* 每个列表的<ul>转为Grid容器，让<li>按行排列 */
.table-1 ul, .table-2 ul {
  display: grid;
  grid-auto-rows: auto; /* 行高由内容决定，Grid会自动统一同一行的高度 */
  gap: 10px; /* 列表项之间的间距 */
}

/* 可选：给<li>加样式方便查看效果 */
.table-1 li, .table-2 li {
  border: 1px solid #ccc;
  padding: 8px;
}

方法2：JavaScript动态设置高度（无需修改HTML结构） #

如果无法调整HTML结构，用JS遍历每个位置的<li>，计算最大高度后统一设置，适合列表长度不一致的场景。

JS代码 #

// 获取所有列表容器
const listContainers = document.querySelectorAll('.table-1, .table-2');
// 找出最长列表的项数
const maxItemCount = Math.max(...Array.from(listContainers).map(container => container.querySelectorAll('li').length));

// 遍历每个位置的列表项
for (let index = 0; index < maxItemCount; index++) {
  const currentItems = [];
  // 收集每个列表中对应位置的<li>（存在的话）
  listContainers.forEach(container => {
    const li = container.querySelector(`li:nth-child(${index + 1})`);
    li && currentItems.push(li);
  });
  // 计算当前位置的最大高度
  const maxHeight = Math.max(...currentItems.map(item => item.offsetHeight));
  // 统一设置高度，可选添加垂直居中样式
  currentItems.forEach(item => {
    item.style.height = `${maxHeight}px`;
    item.style.display = 'flex';
    item.style.alignItems = 'center';
  });
}

// 可选：监听窗口 resize 事件，重新计算高度（适配响应式场景）
window.addEventListener('resize', () => {
  // 重复上面的计算逻辑，或者封装成函数调用
});

方法3：Flexbox布局（适合列表项数量相同的场景） #

如果每个列表的<li>数量完全一致，用Flexbox的flex:1让每个列表项平分容器高度，实现对应位置高度统一。

CSS代码 #

/* 给每个列表容器设置固定宽度，按需调整 */
.table-1, .table-2 {
  width: 200px;
}

/* 把<ul>转为垂直Flex布局 */
.table-1 ul, .table-2 ul {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}

/* 让每个<li>平分可用空间 */
.table-1 li, .table-2 li {
  flex: 1;
  border: 1px solid #ccc;
  padding: 8px;
}

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