根本原因是ul默认块级流式布局，卡片高度由内容撑开且无统一约束；应将ul设为grid容器并用grid-template-rows: 1fr统一行高，li设align-self: stretch和flex-column，配合margin-top: auto固定底部按钮。
ul里直接放卡片，为什么高度总对不齐
根本原因是
- 和
- 默认是块级流式布局，每个
- 高度由内部内容撑开，内容长短一不一样，卡片就参差不齐。更麻烦的是，浏览器会把非法嵌套（比如
- 里塞但没设高度控制）当成普通文本流处理，flex或grid规则压根不生效。
常见错误现象：
li在DevTools里显示高度各不相同、hover时卡片上下浮动、底部按钮错位、响应式换行后留白异常。-
ul必须设list-style: none和padding-left: 0，否则项目符号干扰布局计算 -
li不能只靠height: 100%——它没有明确的父高度上下文，这个声明基本无效 - 别在
li上直接写display: flex然后指望子元素填满——得先让li自身有可继承的高度来源
用CSS Grid控制ul卡片行高一致
最稳的解法是把
ul变成Grid容器，绕过- 的流式限制，让每张卡片“按轨道分配空间”。关键不是拉伸卡片，而是统一轨道高度。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 给
ul加display: grid，用grid-template-rows: 1fr强制所有li等高（注意：不是minmax()，那是列控制） - 列数用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，和卡片宽度解耦 -
li本身设align-self: stretch，确保它占满整条轨道；别依赖height: 100% - 如果卡片内有按钮要贴底，
li得再加display: flex; flex-direction: column，不然margin-top: auto没作用
示例片段：
ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-rows: 1fr; gap: 1.5rem; list-style: none; padding: 0; } li { align-self: stretch; display: flex; flex-direction: column; }Flexbox方案下如何避免li高度塌陷
如果必须用
display: flexonul，那li高度不一致的根源在于：flex item默认align-items: stretch只在交叉轴起作用，而主轴（水平）方向不控制高度继承。必须显式干预：
-
ul设align-items: stretch（默认值，但别省略——某些重置样式会覆盖） -
li设height: 100%+min-height: 200px（给个底线，防内容过短） -
li内部卡片结构必须是display: flex; flex-direction: column，否则flex-grow: 1对.card-body无效 - 禁用
li的margin，改用gap——gap不参与flex尺寸计算，不会导致高度抖动
卡片底部按钮对不齐？检查这三处
即使外层
ul和li都等高了，按钮还是浮在不同位置，问题一定出在卡片内部弹性链断裂。-
.card或li没设flex-direction: column——这是margin-top: auto生效的前提 - 按钮不在
.card直系子元素里，比如套了.card-content和.card-actions两层——那margin-top: auto得加在.card-actions上，而不是button上 - 外层
ul用了align-items: center或flex-start——这会覆盖stretch，导致li不拉满高度
真正容易被忽略的点：卡片高度一致 ≠ 按钮视觉对齐。前者靠外层Grid/Flex控制，后者靠内部flex-direction + margin-auto组合。两个层级缺一不可，且不能互相替代。
-
