如何调整Mailchimp嵌入表单输入框间距并实现行内排列

我希望所有表单元素的排布更紧凑，但始终没有找到代码中需要调整的对应位置。

当前使用的自定义CSS代码如下：

#mc_embed_signup 
{ background: none;  
font-family: Noto Serif Display;  
border radius: 0px;  
font-style: italic;
letter-spacing: 2px;
font-size: 14px;
color: #676767;
overflow-x: hidden; 
overflow-y: hidden;} 

#mc_embed_signup input.fname { 
font-family: Noto Serif Display;  
font-style: light;   
text-transform: uppercase;  
color: #676767;  
border-radius: 0px;  
border-color: #ffffff;  
letter-spacing: 5px;  
font-size: 11px; 
width: 80%;  
margin: auto;
padding-left: 3px;
text-align: center;
margin-bottom: 1px; 
min-height: 10px;} 

#mc_embed_signup input.lname { 
font-family: Noto Serif Display;  
font-style: light;   
text-transform: uppercase;  
color: #676767;  
border-radius: 0px;  
border-color: #dee0da;  
letter-spacing: 5px;  
font-size: 11px; 
width: 80%; 
padding-left: 3px;
margin: auto; 
text-align: center; 
margin-bottom: 1px; 
min-height: 10px;} 

#mc_embed_signup input.email { 
font-family: Noto Serif Display;  
font-style: light;   
text-transform: uppercase;  
color: #676767;  
border-radius: 0px;  
border-color: #dee0da;  
letter-spacing: 5px;  
font-size: 11px; 
width: 80%; 
padding-left: 3px; 
margin: auto; 
text-align: center; 
margin-bottom: 1px;  
min-height: 10px;} 

#mc_embed_signup input.button { 
background-color: #C0D3D9;  
color: #676767;  
border-radius: 0px;  
font-family: Noto Serif Display; 
font-style: italic;  
letter-spacing: 1px;  
font-size: 12px; 
min-width: 110px; margin: auto; display: block;} 
</style> 

待解决的问题：

• 调整代码后始终无法缩小输入框与按钮的间距
• 确认Mailchimp嵌入代码是否自带内置样式
• 添加行内排列代码后，所有输入框会变为左对齐，且尺寸缩小为原来的一半，无法实现预期效果

• Mailchimp默认生成的嵌入代码自带内置基础样式，会预先给表单元素设置margin、padding、块级排布等默认属性，自定义CSS如果优先级不足、存在语法错误，或者没有命中对应选择器，就会出现修改不生效的情况。
• 间距调整不生效有两个核心原因：一是现有代码存在语法错误，border radius: 0px; 漏写了连字符，正确写法为border-radius: 0px;，CSS语法错误会导致浏览器解析中断，后续部分样式无法生效；二是现有代码只设置了输入框的下外边距，没有清除Mailchimp默认给提交按钮添加的上外边距，也没有重置输入框的上下内边距，自然达不到紧凑效果。另外现有代码写的font-style: light属于错误属性，light是字重参数，应该用font-weight: 300实现，错误属性也会影响样式解析。
• 行内排列时出现左对齐、尺寸缩小问题：现有代码给每个输入框设置了width: 80%，当输入框从块级模式改为行内模式时，百分比宽度是相对于父容器计算的，三个输入框总宽度远超出容器宽度，就会被挤压变形；同时块级模式下margin: auto的居中规则对行内元素无效，就会出现左对齐。

1. 垂直紧凑排布（默认上下排列） #

将原有自定义CSS替换为以下代码，即可覆盖默认样式、修复语法错误，实现元素紧凑排布。如果需要进一步缩小间距，直接调整输入框的margin-bottom数值、按钮的margin-top数值即可，数值越小间距越近。

#mc_embed_signup {
  background: none;
  font-family: 'Noto Serif Display', serif;
  border-radius: 0px;
  font-style: italic;
  letter-spacing: 2px;
  font-size: 14px;
  color: #676767;
  overflow: hidden;
  clear: both;
}
/* 统一重置输入框盒模型、默认边距 */
#mc_embed_signup input {
  box-sizing: border-box;
  padding: 6px 3px;
  margin: 0 auto 2px auto;
}

#mc_embed_signup input.fname,
#mc_embed_signup input.lname,
#mc_embed_signup input.email {
  font-family: 'Noto Serif Display', serif;
  font-weight: 300;
  text-transform: uppercase;
  color: #676767;
  border-radius: 0px;
  border: 1px solid #dee0da;
  letter-spacing: 5px;
  font-size: 11px;
  width: 80%;
  text-align: center;
  min-height: 24px;
  display: block;
}
/* 匹配原有设置的姓名字段边框色 */
#mc_embed_signup input.fname {
  border-color: #ffffff;
}
/* 清除按钮默认上外边距，控制和最后一个输入框的间距 */
#mc_embed_signup input.button {
  background-color: #C0D3D9;
  color: #676767;
  border-radius: 0px;
  font-family: 'Noto Serif Display', serif;
  font-style: italic;
  letter-spacing: 1px;
  font-size: 12px;
  min-width: 110px;
  margin: 4px auto 0 auto;
  display: block;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
}

2. 输入框行内排列方案 #

如果需要三个输入框在同一行排列，在上面的CSS基础上追加以下代码即可，不会出现对齐错乱、尺寸缩小的问题：

#mc_embed_signup form {
  text-align: center;
  padding: 0;
}
#mc_embed_signup .mc-field-group {
  display: inline-block;
  width: 30%;
  vertical-align: middle;
}
#mc_embed_signup .mc-field-group input {
  width: 100%;
  margin: 0;
}
#mc_embed_signup input.button {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 1%;
}

内容的提问来源于stack exchange，提问作者Lita Merrill