html - 输入字段未显示超过一定宽度

Question

这让我抓狂!我希望有人能帮助我...我对 HTML 和 CSS 还很陌生。

我有一个注册表单，我想在我的网站上设置样式。只是名字、电子邮件和提交按钮。我希望两个输入字段位于同一行(设法实现了这一点)，并让它们占据 100% 的空间。然后，当窗口缩小到移动设备时，它们各自在一条线上。大多数情况下一切正常，除了字段不会显示超过一定宽度。我尝试了多种组合，使用 width=100%、width=auto、width=..px...

这是目前的屏幕截图: http://www.marnielefevre.com/new/wp-content/uploads/2016/02/Screen-Shot-2016-02-22-at-4.10.20-pm.png

这是我的相关 HTML 片段...

<div class="fielddiv">

<div class="fieldrow"><label>First Name*</label>
<input name="firstname" required="" type="text" /></div>

<div class="fieldrow"><label>Email*</label>
<input name="email" required="" type="email" /></div>

<div style="padding-top: 40px; text-align: center;"><input type="submit" value="SIGN ME UP" /></div>

</div>

...和 ​​CSS

.fielddiv {
text-align: center;
margin: auto;
width: auto;
}

.fieldrow {
display: inline-block;
margin: auto;
text-align: center;
padding-top: 20px;
min-width: 330px;
max-width: 800px;
}

感谢任何帮助!!

Answer 1

在不知道您的应用程序中的其他代码在做什么的情况下，我会(盲目地)建议以下内容；

.fielddiv {
    display: flex;
}

.fieldrow {
    flex: 1;
    text-align: center;
}
.fieldrow:first-child {
    margin-right: 20px;
}