20 lines
1.0 KiB
Markdown
20 lines
1.0 KiB
Markdown
## 问题分析
|
||
从截图可以看出，远程黑名单管理的保存按钮与输入框在垂直方向上没有对齐，按钮位置偏下。
|
||
|
||
## 原因分析
|
||
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，确保与输入框精确对齐
|
||
|
||
## 预期效果
|
||
保存按钮与输入框在垂直方向上精确对齐，整体布局更加美观和专业。 |