卡片底部操作栏应使用语义化包裹按钮，避免或无class的；CSS用display: flex配合justify-content和gap对齐；小屏优先列堆叠；需保障可访问性焦点与状态样式。
卡片底部操作栏的 HTML 结构怎么写
直接用 <footer></footer> 或带语义的 <div class="card-footer"> 包裹按钮最稳妥。别用 <code><nav></nav> 或 <aside></aside>，它们语义不符；也别为了“省一个 class”直接塞进 <div> 里——后续定位、间距、响应式都会变麻烦。<p>推荐结构：</p><pre class='brush:php;toolbar:false;'><article class="card">
<header>...</header>
<main>...</main>
<footer class="card-footer">
<button type="button">编辑</button>
<button type="button">删除</button>
</footer>
</article></pre><ul>
<li>
<code><footer></footer> 在卡片上下文中是合法且推荐的语义化选择（W3C 明确支持嵌套在 <article></article> 内）
<header></header> 或 <main></main> 末尾——语义混乱，CSS 选择器易冲突<div class="card-footer">，但别省略 class<h3>用 Flex 布局对齐按钮时常见错在哪</h3>
<p>多数人写 <code>display: flex 后发现按钮堆一起、换行错乱或左右不对齐，问题往往出在没控制主轴方向和对齐方式。
关键 CSS：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.card-footer {
display: flex;
justify-content: flex-end; /* 按钮右对齐 */
gap: 0.5rem; /* 推荐用 gap，不是 margin */
}- 漏设
justify-content：默认是flex-start，按钮全挤左上角 - 用
margin-left: auto推最后一个按钮到右边 —— 这在多按钮时失效，且不兼容旧版 Safari - 用
text-align: right配合inline-block按钮 —— 响应式下易折行错位，且无法精确控制间距 -
gap是唯一能自动处理按钮间空隙的属性，比手动加margin更健壮
响应式折叠底部操作栏要注意什么
小屏下按钮横向放不下，必须换行或收起，但不能简单用 flex-wrap: wrap —— 它会让按钮在宽度不足时突然折成两行，视觉割裂感强。
- 优先考虑「单列堆叠」：
flex-direction: column+align-items: stretch，让按钮占满宽度 - 若需保留按钮组概念（比如“确认/取消”），用
flex-wrap: wrap但配合min-width限制按钮最小宽度，防止过窄 - 别用
display: none隐藏整个.card-footer—— 屏幕阅读器会跳过操作入口，可访问性失败 - 真要隐藏，改用
visibility: hidden+height: 0+overflow: hidden，保持 DOM 可读性
按钮状态与焦点样式为什么总被忽略
卡片底部操作栏最容易被当成“装饰区域”，结果键盘用户 Tab 到这里时焦点消失、按钮禁用态无视觉反馈、悬停态在触摸设备上残留。
- 禁用按钮必须设
opacity: 0.5+pointer-events: none，只靠disabled属性不够（尤其自定义按钮） -
:focus-visible要显式定义，别依赖浏览器默认环形 outline —— 它常被重置 CSS 抹掉 - 触摸设备上
:hover会意外触发（iOS Safari 的兼容模式），建议用@media (hover: hover)包裹悬停样式 - 按钮内文字别用
text-transform: uppercase直接处理大小写 —— 屏幕阅读器可能读错，应改用真实大写文本
实际项目里，最常出问题的是把底部操作栏当“最后加的一点样式”，结果语义缺失、响应式断裂、可访问性归零。它不是装饰，是卡片的交互终点。
