Html css数字键盘对齐问题

我有这个数字键盘使用html和css。现在我面临着第三排和ok按钮的对齐问题。我尝试将所有行作为新表，这样我就可以在数字键盘上按ok按钮

+5
+10
+20
+50
1.
2.
3.
X
好啊
4.
5.
6.
7.
8.
9
0
.

正如我在注释中所说的，一个表非常简单

。键盘{
显示器：flex；
弹性收缩：0；
填充：3倍；
背景：#000000；
弯曲方向：立柱；
/*触摸动作：无*/
}
.数字按钮{
宽度：钙（100%-1px）；
}
.快速选取按钮{
宽度：25%；
}
.第{}行
.td{
填充：0；
保证金：0；
}
.按钮{
位置：相对位置；
高度：25px；
宽度：25%；
线高：25px；
文本对齐：居中；
颜色：#ffffff；
背景:#333333；
保证金：1px；
字体大小：22px；
/*触摸动作：无*/
}
.numbersButtons.行：第一个孩子。按钮：第一个孩子{
边界半径：5px0；
}
.numbersButtons.行：第一个孩子。按钮：最后一个孩子{
边界半径：0 5px 0 0；
}
/*.numbersButtons.row:最后一个子项。button:第一个子项{边界半径：0 0 5px；}.numbersButtons.row:最后一个子项。button:最后一个子项{边界半径：0 0 0 5px 0；}*/
.numbersButtons.行：第三个子项。按钮：最后一个子项{
高度：50px；
背景：红色；
}
.数字按钮2{
宽度：75%；
-webkit边框垂直间距：0；
}
.数字按钮3{
宽度：25.1%；
高度：75px；
左边缘：75%；
-webkit边框垂直间距：0；
}
.数字按钮4{
宽度：75%；
利润上限：-76px；
}
.lastRow{}
.零{
宽度：66.65%；
}
多特先生{
宽度：33.35%；
}
.Numbers按钮2.最后一行：最后一个孩子。按钮：第一个孩子{
边界半径：0 5px；
}
.Numbers按钮2.lastRow:最后一个孩子。按钮：最后一个孩子{
边界半径：0 5px 0；
}
.quickPickButtons.按钮{
背景#4caf50；
颜色：#ffffff；
}
.quickPickButtons.行：第一个子项.按钮{
边界半径：5px5px0；
}
.quickPickButtons.行：最后一个子项.按钮{
边界半径：0 0 5px 5px；
}
.按钮{
背景：#000000；
颜色：#ffffff；
}
.deleteIcon{
高度：20px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

+5
+10
+20
+50
1.
2.
3.
X
4.
5.
6.
好啊
7.
8.
9
0
.

正如我在注释中所说的，一个表非常简单

。键盘{
显示器：flex；
弹性收缩：0；
填充：3倍；
背景：#000000；
弯曲方向：立柱；
/*触摸动作：无*/
}
.数字按钮{
宽度：钙（100%-1px）；
}
.快速选取按钮{
宽度：25%；
}
.第{}行
.td{
填充：0；
保证金：0；
}
.按钮{
位置：相对位置；
高度：25px；
宽度：25%；
线高：25px；
文本对齐：居中；
颜色：#ffffff；
背景:#333333；
保证金：1px；
字体大小：22px；
/*触摸动作：无*/
}
.numbersButtons.行：第一个孩子。按钮：第一个孩子{
边界半径：5px0；
}
.numbersButtons.行：第一个孩子。按钮：最后一个孩子{
边界半径：0 5px 0 0；
}
/*.numbersButtons.row:最后一个子项。button:第一个子项{边界半径：0 0 5px；}.numbersButtons.row:最后一个子项。button:最后一个子项{边界半径：0 0 0 5px 0；}*/
.numbersButtons.行：第三个子项。按钮：最后一个子项{
高度：50px；
背景：红色；
}
.数字按钮2{
宽度：75%；
-webkit边框垂直间距：0；
}
.数字按钮3{
宽度：25.1%；
高度：75px；
左边缘：75%；
-webkit边框垂直间距：0；
}
.数字按钮4{
宽度：75%；
利润上限：-76px；
}
.lastRow{}
.零{
宽度：66.65%；
}
多特先生{
宽度：33.35%；
}
.Numbers按钮2.最后一行：最后一个孩子。按钮：第一个孩子{
边界半径：0 5px；
}
.Numbers按钮2.lastRow:最后一个孩子。按钮：最后一个孩子{
边界半径：0 5px 0；
}
.quickPickButtons.按钮{
背景#4caf50；
颜色：#ffffff；
}
.quickPickButtons.行：第一个子项.按钮{
边界半径：5px5px0；
}
.quickPickButtons.行：最后一个子项.按钮{
边界半径：0 0 5px 5px；
}
.按钮{
背景：#000000；
颜色：#ffffff；
}
.deleteIcon{
高度：20px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

+5
+10
+20
+50
1.
2.
3.
X
4.
5.
6.
好啊
7.
8.
9
0
.

最简单的解决方案：使用网格

/*--布局--*/
.键盘{
显示：网格；
网格模板列：重复（4，1fr）；
网格模板行：重复（5，自动）；
网格模板区域：
“第一季度第二季度第三季度第四季度”
“d1 d2 d3 X”
“d4 d5 d6正常”
“d7 d8 d9正常”
“o o dt ok”；
间隙：2px；
填充：4px；
}
#嗯{
网格区域：ok；
}
#d0{
网格面积：0；
}
/*--布局完成。剩下的是装饰--*/
/*颜色和字体*/
.键盘{
背景：黑色；
边界半径：7px；
字体大小：22px；
}
.键盘按钮{
颜色：#ffffff；
背景:#333333；
边界：无；
字体大小：继承；
}
.键盘按钮.快速拾取{
背景#4caf50；
科洛