1.0 KiB
1.0 KiB
问题分析
从截图可以看出,远程黑名单管理的保存按钮与输入框在垂直方向上没有对齐,按钮位置偏下。
原因分析
- 当前使用grid布局分为3列,前两列包含label和input,第三列包含空label和按钮容器
- 空label虽然没有内容,但仍然占据了空间(mb-1 margin),导致按钮被推到下方
- 按钮容器使用了
items-center,但整体位置受label影响
修复方案
修改第三列的HTML结构,移除空label,直接放置按钮容器,并使用flex布局的对齐属性确保按钮与输入框垂直对齐。
具体修改
- 打开
/root/dns/static/index.html文件 - 找到远程黑名单管理的添加表单部分(第839-847行)
- 修改第三列的HTML结构,移除空label,直接放置按钮容器
- 使用flex布局的
items-end属性确保按钮与输入框底部对齐 - 调整按钮的margin-top为0,确保与输入框精确对齐
预期效果
保存按钮与输入框在垂直方向上精确对齐,整体布局更加美观和专业。