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;
}

Answer 2

请在您的应用程序中使用以下代码，它将增加页面文本框的宽度：

.fielddiv input[type="text"] {
    width:100%;
}
.fielddiv input[type="email"] {
    width:100%;
}

或

.fielddiv input[type="text"] { width:100% !important; } .fielddiv input[type="email"] { width:100% !important; }

希望这符合您的要求。

输入字段未显示超过特定宽度

2 个答案: