如何用CSS使两个内容不同的<li>元素高度一致？

当然可以！不用借助JavaScript，纯CSS就能完美解决这个需求——让两个<li>自动匹配其中最高项的高度，哪怕宽度是相对值、无法预知最终高度也没问题。下面给你几种实用的方案：

这是最简单高效的实现方式，只需要给父元素<ul>加上display: flex，Flexbox的默认特性会自动让所有子项高度拉平。

代码示例：

* { box-sizing: border-box; }
ul {
  display: flex; /* 核心属性 */
  padding: 0;
  width: 100%;
  border: 1px solid red;
}
li {
  list-style-type: none;
  margin: 0;
  padding: 1em;
  flex: 1; /* 让两个li平分宽度，可根据需求调整比例 */
  border: 1px solid blue; /* 方便直观查看效果 */
}

原理：Flex容器的align-items默认值是stretch，所有flex子项会自动拉伸至容器内最高元素的高度，完全适配动态内容和相对宽度的场景。

如果你需要更复杂的布局控制，CSS Grid也是绝佳选择，同样能轻松实现等高效果：

代码示例：

* { box-sizing: border-box; }
ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两个li平分宽度，可修改数量或比例 */
  padding: 0;
  width: 100%;
  border: 1px solid red;
  gap: 0; /* 控制li之间的间距，按需设置 */
}
li {
  list-style-type: none;
  margin: 0;
  padding: 1em;
  border: 1px solid blue;
}

原理：Grid布局中，同一行的网格项默认会占据整行的高度，所以天然就保持等高，适合需要多列布局、复杂对齐的场景。

如果需要兼容较老的浏览器，可以用模拟表格布局的方式（虽然灵活性不如前两种，但能解决问题）：

代码示例：

* { box-sizing: border-box; }
ul {
  display: table;
  width: 100%;
  padding: 0;
  border: 1px solid red;
}
li {
  display: table-cell;
  list-style-type: none;
  padding: 1em;
  border: 1px solid blue;
}

原理：表格单元格天然具备等高特性，通过把<ul>设为table、<li>设为table-cell，就能借助这个特性实现等高布局。

总结一下：优先选择Flexbox方案，代码最简洁、兼容性也覆盖绝大多数现代浏览器，完全不需要提前预知元素的高度或宽度，自动适配内容变化。

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