37 lines
1.5 KiB
Markdown
37 lines
1.5 KiB
Markdown
# 修复保存按钮错位问题
|
||
|
||
## 问题分析
|
||
远程黑名单管理部分的保存按钮错位，原因是：
|
||
- 添加黑名单表单使用了Grid布局（`grid grid-cols-1 md:grid-cols-3 gap-4`）
|
||
- 前两个子元素包含label和input，高度较高
|
||
- 第三个子元素只有按钮和状态显示，没有label，高度较矮
|
||
- 导致按钮在垂直方向上与前两个输入框不对齐
|
||
|
||
## 解决方案
|
||
修改添加黑名单表单的HTML结构，确保三个子元素在垂直方向上对齐：
|
||
|
||
1. **为第三个子元素添加垂直对齐**
|
||
- 确保保存按钮容器与前两个输入框容器在垂直方向上对齐
|
||
- 可以选择顶部对齐或中间对齐，保持视觉一致性
|
||
|
||
2. **统一子元素结构**
|
||
- 为第三个子元素添加一个隐藏的label，确保结构一致
|
||
- 或者调整Grid布局，使第三个子元素的内容垂直居中
|
||
|
||
3. **调整容器样式**
|
||
- 修改保存按钮容器的样式，确保垂直对齐
|
||
- 可以使用`items-start`或`items-center`属性
|
||
|
||
## 实现步骤
|
||
|
||
1. 修改`add-blacklist-form`的HTML结构
|
||
- 为第三个子元素添加`items-start`类，使其与前两个子元素的顶部对齐
|
||
- 或者添加一个隐藏的label，确保结构一致
|
||
|
||
2. 测试修改后的效果
|
||
- 确保保存按钮与前两个输入框在垂直方向上对齐
|
||
- 保持响应式布局，在不同屏幕尺寸下都能正常显示
|
||
|
||
## 预期效果
|
||
|
||
保存按钮将与前两个输入框在垂直方向上对齐，消除错位现象，提升表单的视觉一致性和用户体验。 |