Files
dns-server/.trae/documents/修复远程黑名单管理保存按钮对齐问题.md
Alex Yang 3207510c91 Web优化
2025-11-28 23:59:58 +08:00

1.0 KiB
Raw Blame History

问题分析

从截图可以看出,远程黑名单管理的保存按钮与输入框在垂直方向上没有对齐,按钮位置偏下。

原因分析

  1. 当前使用grid布局分为3列前两列包含label和input第三列包含空label和按钮容器
  2. 空label虽然没有内容但仍然占据了空间mb-1 margin导致按钮被推到下方
  3. 按钮容器使用了items-center但整体位置受label影响

修复方案

修改第三列的HTML结构移除空label直接放置按钮容器并使用flex布局的对齐属性确保按钮与输入框垂直对齐。

具体修改

  1. 打开/root/dns/static/index.html文件
  2. 找到远程黑名单管理的添加表单部分第839-847行
  3. 修改第三列的HTML结构移除空label直接放置按钮容器
  4. 使用flex布局的items-end属性确保按钮与输入框底部对齐
  5. 调整按钮的margin-top为0确保与输入框精确对齐

预期效果

保存按钮与输入框在垂直方向上精确对齐,整体布局更加美观和专业。