Html CSS-设置表单样式

我正在为一个网站设计一个表单，我需要它看起来像这样-

到目前为止，我的编码版本是这样的-

由于某些原因，名称和电子邮件部分的大小不合适，并且似乎有一些我无法覆盖的填充或边距属性。这是我目前的代码-

表单{
高度：200px；
宽度：400px；
右边距：50px；
}
.姓名{
浮动：左；
}
输入[类型=文本]，
输入[类型=电子邮件]{
背景：#f0；
字体大小：10px；
宽度：100%；
高度：20px；
}
输入[类型=主题]{
背景：#f0；
字体大小：10px；
宽度：100%；
高度：20px；
}
文本区{
调整大小：垂直；
字体大小：10px；
宽度：100%；
背景：#f0；
高度：100px；
}
输入[类型=提交]{
背景：#00bff；
边界：无；
颜色：#ffffff；
光标：指针；
字体大小：10px；
字号：700；
宽度：100%；
}

---

我做了一系列的调整和最后一首歌，所以我希望你能够通读这首歌并理解它。如果没有，请随时提问

表单{
高度：200px；
宽度：400px；
右边距：50px；
}
字段集{
边界：无；
填充：0；
保证金：0；
显示器：flex；
}
分区行{
显示器：flex；
宽度：100%；
}
div.row输入{
左边距：5px；
}
div.row输入：第一个子项{
左边距：0；
}
输入[类型=文本]，
输入[类型=电子邮件]{
背景：#E8E8E8；
字体大小：10px；
宽度：100%；
框大小：边框框；
边界：0；
填充：0；
边缘底部：5px；
填充：6px 12px；
}
文本区{
调整大小：无；
字体大小：10px；
背景：#E8E8E8；
宽度：100%；
框大小：边框框；
边界：0；
填充：6px 12px；
边缘底部：5px；
}
输入[类型=提交]{
背景：#1ba4dd；
边界：无；
颜色：#ffffff；
光标：指针；
字体大小：10px；
字号：700；
宽度：100%；
填充：8px0；
}
输入[类型=提交]：悬停{
背景：#00bff；
}

如果你尝试这样做会发生什么：给你的email div一类“email”，在你的css中：

.email{float:left；margin left:10px！important；}

@Arman它使它成为一个长的部分，但当我尝试应用任何宽度规则使它与名称部分对齐时，什么都没有发生。这似乎对我有效：我有一个.row规则用于高度（250px）和边距顶部（20px），我如何覆盖表单中的此项，因为它在名称/电子邮件字段和表单的其余部分之间留下了巨大的差距？您的意思是您已经有了一个名为

行

的类？只需选择一个不同的类名，或者制定一个更具体的规则（比如

form#thispecularform div.row

）。我刚刚更新了答案以说明它的外观。我已经更新了css文件中的其他行，所以我知道它们没有冲突。是什么造成了这个差距？我怎么知道？这大概是由于一些你没有共享的CSS造成的。我建议检查浏览器中的元素，看看发生了什么。