操作按钮堆在表格顶部是布局逻辑错误，应将查询控件左对齐、新增按钮右对齐或固定右下角；行内操作列须右对齐、删除按钮强警示；所有按钮用；响应式用flex-direction+gap自适应；点击后须禁用按钮并更新状态。
操作按钮堆在表格顶部，是后台界面最常见、也最容易被用户骂的设计失误。它直接导致查找入口慢、误点率高、移动端手指一滑就点错删除——这不是体验问题，是布局逻辑错了。
表格上方工具栏：查询与新增必须分离
把搜索框、筛选条件、重置按钮和新增按钮全塞进同一行，视觉上拥挤，语义上混乱。用户第一眼要找的是“查什么”，不是“加什么”。
- 查询相关控件（
input、select、button类型为“查询”或“重置”）统一左对齐，放在表格上方左侧区域 -
新增按钮必须右对齐，或使用position: fixed; bottom: 20px; right: 20px;固定在视口右下角——它不该随滚动消失，也不该被分页栏带跑 - 避免用
float: right实现右对齐，容易触发父容器高度塌陷；推荐display: flex; justify-content: space-between;或text-align: right配合块级容器
表格行内操作列：右对齐 + 删除强警示
每行末尾的操作按钮，本质是高频、高风险动作，排版必须服从人眼阅读习惯和手部操作路径。
- 操作列用
min-width: 120px防止文字换行，加white-space: nowrap;保证按钮始终单行显示 - 按钮组用
display: flex; gap: 8px; justify-content: flex-end;实现右对齐，比纯text-align: right更可控（尤其当按钮内含图标时） -
删除按钮必须有明确危险标识：background-color: #d9534f;、border-color: #c9302c;，且禁用 hover 变色——颜色变化会削弱警示感 - 绝对不要把
删除放在修改左边；从左到右扫视时，手指自然先落到左边，极易误触
按钮标签必须用 <button></button>，且 type 属性不可省略
用 <a href="#" onclick="del(...)"></a> 绑删除，看似省事，实则埋了三颗雷：键盘无法聚焦、屏幕阅读器识别为跳转链接、表单里可能意外触发提交。
立即学习“前端免费学习笔记（深入）”；
- 所有操作按钮一律用
<button type="button"></button>，哪怕它只是调 JS 函数 - 只有真正提交表单的按钮才写
type="submit"；否则不写type默认是submit，极可能刷新页面 - 别信“我加了
event.preventDefault()就没事”——语义错误在可访问性和测试阶段就会暴露
响应式下按钮排列别硬切，用 flex-direction + gap 自适应
小屏竖排、大屏横排不是靠媒体查询来回切 class，而是靠一个属性切换方向。Flexbox 的 gap 比手动算 margin 安全得多，不会在首尾多出空白，也不会因 margin collapse 失效。
- 工具栏容器设
display: flex; flex-wrap: wrap; gap: 8px; - 小屏下加
flex-direction: column;，按钮自动换行；大屏用flex-direction: row; - 避免给每个按钮单独设
margin-right，一旦按钮数量动态增减，右侧空白就失控
最常被忽略的一点：操作后反馈不是“弹个 toast 就完事”。按钮点击后，应立刻禁用自身（disabled），并同步更新表格数据或 DOM 状态；否则用户二次点击、网络延迟、接口重复提交，全是这里漏出来的。
