Javascript 如何将这些文本框对齐，使它们彼此对齐？

我意识到这是一个愚蠢的问题。我对HTML/CSS有些生疏。我希望两边的文本框彼此对齐，而不是像现在这样稍微交错。我知道我做错了很多事情，包括html和CSS，我只是不确定我需要添加/更改什么。我还知道，除了最后一个框之外，所有的框都设置为class=leftBoxes，但并不是所有的框都在左边，这令人困惑

这是你的电话号码。请注意，在JSFIDLE中运行我的代码时的小预览并非全屏显示时的样子

这是我的密码：

HTML:

---

也许网格可以帮你解决这个问题。看看我在这里做了什么：

表单{
显示：网格；
网格模板列：自动；
}
身体{
背景颜色：浅蓝色；
}
输入{
显示：内联块；
右边距：10px；
}

销售订单编号：
发货人姓名：
AR部门编号：
发货地址1：
客户编号：
发货地址2：
客户订单号：
运送至城市：
订购日期：
船到国：
发货地址邮政编码：

您必须使用或。 尝试添加：

form{
  display:flex;
  flex-direction: column;
}

不是解决办法 但是增加

[type='text']{  
margin-top:10px; 
}

这会使它有点整洁

有一个解释解释为什么最后一个行为异常。文本字段的文本采用“文本对齐中心”样式，因此其显示在中心的右侧

如果有什么办法可以让最后一个表现出来的话，那将是很有趣的

form{
  display:flex;
  flex-direction: column;
}

[type='text']{  
margin-top:10px; 
}