在上部列表中添加字段后，css按钮正在移动

大家好

这就是问题所在：我有3个表，它们是3个项目列表。列表下面有两个按钮（取消/提交）。当我在其中一个列表中添加一行时：下面的按钮将转义，向右移动。怎么回事

如果有人知道如何修复它，我会省下一些头发：

非常感谢

HTML

CSS（又名魔鬼）

---

在这种情况下，您不应该使用

float:left

将对象放置在彼此相邻的位置。在这种情况下，您更希望使用flexbox。将css更改为此，使其彼此相邻显示：

.cols3 {
    width: 33%;
    padding: 0 0.3rem 3rem;
}

#numbers {
    display: flex;
    justify-content: space-between;
}

---

编辑：现在有更好的方法在某些地方定位事物。如果要在X轴或Y轴上定位多个元素，我们称之为

flexbox

。如果要在X轴和Y轴上定位多个元素，则有一个

网格

在这种情况下，您不应该使用

float:left

来定位相邻的对象。在这种情况下，您更希望使用flexbox。将css更改为此，使其彼此相邻显示：

.cols3 {
    width: 33%;
    padding: 0 0.3rem 3rem;
}

#numbers {
    display: flex;
    justify-content: space-between;
}

编辑：现在有更好的方法在某些地方定位事物。如果要在X轴或Y轴上定位多个元素，我们称之为

flexbox

。如果要在X轴和Y轴上定位多个元素，则会有一个

网格

找到它

.cols3 {
    width: 33%;
    padding: 0 0.3rem 3rem;
}

.subcontainer {
    display: flex;
}

对于HTML部分，所有标题h3都已移动到div子容器之前。 有了这些，一切都解决了

但正如特里所说，应该使用网格属性，当您尝试在X&Y位置排列对象时效果更好

谢谢你找到了

.cols3 {
    width: 33%;
    padding: 0 0.3rem 3rem;
}

.subcontainer {
    display: flex;
}

对于HTML部分，所有标题h3都已移动到div子容器之前。 有了这些，一切都解决了

但正如特里所说，应该使用网格属性，当您尝试在X&Y位置排列对象时效果更好

---

谢谢

是的，这有点糟糕，我一定要改进它。非常感谢您的时间，这个问题确实解决了！编辑：但是出现了一个新问题：它破坏了标题“数字”。我已经更新了JSFIDLE：是的，它有点糟糕，我一定要改进它。非常感谢您的时间，这个问题确实解决了！编辑：出现了一个新问题：它破坏了标题“数字”，我更新了JSFIDLE:

.cols3 {
    width: 33%;
    padding: 0 0.3rem 3rem;
}

.subcontainer {
    display: flex;
}