HTML表单:<输入>框随着屏幕宽度的增加而彼此远离

Question

我的表单有问题，当屏幕宽度超过575px时，其中两个框会不断移动。我想要的是，当屏幕分辨率为575px或更高时，它们不会相互远离，我怎么能做到这一点？

您可以在JSFiddle链接和下面找到相关代码。如有任何帮助，我们将不胜感激，谢谢。

https://jsfiddle.net/okahn00/z6jfw7ds/131/

HTML和CSS代码：

body {
background-color: #000;
color: white;
font-size: 25px;
text-align: center;
}
form {
margin-top: 15%;
}
label {
display: block;
margin-top: 10px;
font-size: 60%;
}
/* <label> tag for 'Date of Birth' */
.date-of-birth {
margin-bottom: 25px;
margin-top: 20px;
text-align: center;
}
/* styles the 'First name', 'Last name' and 'E-mail' boxes */
input {
width: 94%;
height: 50px;
background-color: #000;
border: 2px solid #fff;
margin-top: 3px;
}
/* The 'Day' and 'Month' dropdown boxes */
select {
width: 47%;
height: 50px;
background-color: transparent;
color: #fff;
border: 2px solid #fff;
margin-top: -8px;
margin-bottom: 20px;
padding-left: 15px;
}
/* 'Day' dropbox */
select:first-child {
margin-right: 12px;
}
.form-group {
display: inline-block;
width: 47.2%;
margin-bottom: 10px;
}
/* Pushes both boxes to the sides */
.form-group1 {
margin-right: 8px;
}
@media only screen and (min-width: 575px) {
/* Adds padding to the whole form */
.mail-padding {
padding: 20px 150px 0 150px;
}
/* div container for 'First name' */
.form-group1 {
margin-right: 0px;
}
/* sets width of both 'First name' 'Last name' boxes */
.form-group input {
width: 94px;
/* width: 80%; */
}
/* <input> box for 'Day' and 'Month' */
select {
width: 110px;
}
/* <input> box for 'E-mail' */
form>div>input {
width: 220px;
}
}

<form>
<div class="mail-padding">
<div class="form-group1 form-group">
<label>First name</label>
<input>
</div>
<div class="form-group2 form-group">
<label>Last name</label>
<input>
</div>
<label>E-mail</label>
<input>
</div>
<label class="date-of-birth">Date of Birth</label>
<div class="mail-padding">
<select id="dob-day" name="dob">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="dob-month" name="dob">
<option value="jan">Jan</option>
<option value="feb">Feb</option>
</select>
</div>
</form>

Answer 1

您可以在媒体查询中将max-width添加到.form-group，以防止它们变得越来越宽，例如120px，如下所述：

body {
background-color: #000;
color: white;
font-size: 25px;
text-align: center;
}
form {
margin-top: 15%;
}
label {
display: block;
margin-top: 10px;
font-size: 60%;
}
/* <label> tag for 'Date of Birth' */
.date-of-birth {
margin-bottom: 25px;
margin-top: 20px;
text-align: center;
}
/* styles the 'First name', 'Last name' and 'E-mail' boxes */
input {
width: 94%;
height: 50px;
background-color: #000;
border: 2px solid #fff;
margin-top: 3px;
}
/* The 'Day' and 'Month' dropdown boxes */
select {
width: 47%;
height: 50px;
background-color: transparent;
color: #fff;
border: 2px solid #fff;
margin-top: -8px;
margin-bottom: 20px;
padding-left: 15px;
}
/* 'Day' dropbox */
select:first-child {
margin-right: 12px;
}
.form-group {
display: inline-block;
width: 47.2%;
margin-bottom: 10px;
}
/* Pushes both boxes to the sides */
.form-group1 {
margin-right: 8px;
}
@media only screen and (min-width: 575px) {
/* Adds padding to the whole form */
.mail-padding {
padding: 20px 150px 0 150px;
}
.form-group {
max-width: 120px;
}
/* div container for 'First name' */
.form-group1 {
margin-right: 0px;
}
/* sets width of both 'First name' 'Last name' boxes */
.form-group input {
width: 94px;
/* width: 80%; */
}
/* <input> box for 'Day' and 'Month' */
select {
width: 110px;
}
/* <input> box for 'E-mail' */
form>div>input {
width: 220px;
}
}

<form>
<div class="mail-padding">
<div class="form-group1 form-group">
<label>First name</label>
<input>
</div>
<div class="form-group2 form-group">
<label>Last name</label>
<input>
</div>
<label>E-mail</label>
<input>
</div>
<label class="date-of-birth">Date of Birth</label>
<div class="mail-padding">
<select id="dob-day" name="dob">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="dob-month" name="dob">
<option value="jan">Jan</option>
<option value="feb">Feb</option>
</select>
</div>
</form>

Answer 2

如果您不想在屏幕大小超过575px时进行扩展，您只需执行此操作即可

@media only screen and (min-width: 575px){
.mail-padding {
padding: 20px 150px 0 150px;
max-width: 575px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
}

Answer 3

如果添加一个"表单容器"；并稍微清理一下CSS上的媒体查询代码，它就可以工作了。看见https://jsfiddle.net/40gkLzym/63/以供参考。

在HTML:上试试这个

<div class="form-container">

<form>

<div class="form-group1 form-group">
<label>First name</label>
<input>
</div>

<div class="form-group2 form-group">
<label>Last name</label>
<input>
</div>
<label>E-mail</label>
<input id="email">

<label class="date-of-birth">Date of Birth</label>

<div class="mail-padding">
<select id="dob-day" name="dob">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="dob-month" name="dob">
<option value="jan">Jan</option>
<option value="feb">Feb</option>
</select>
</div>

</form> </div>

在CSS上试试这个：

body {
background-color: #000;
color: white;
font-size: 25px;
text-align: center;
}
form {
margin-top: 15%;
}
label {
display: block;
margin-top: 10px;
font-size: 60%;
}
/* <label> tag for 'Date of Birth' */
.date-of-birth {
margin-bottom: 25px;
margin-top: 20px;
text-align: center;
}
/* styles the 'First name', 'Last name' and 'E-mail' boxes */
input {
width: 94%;
height: 50px;
background-color: #000;
border: 2px solid #fff;
margin-top: 3px;
}
/* The 'Day' and 'Month' dropdown boxes */
select {
width: 47%;
height: 50px;
background-color: transparent;
color: #fff;
border: 2px solid #fff;
margin-top: -8px;
margin-bottom: 20px;
padding-left: 15px;
}
.form-group {
display: inline-block;
width: 47.2%;
margin-bottom: 10px;
}
/* Pushes both boxes to the sides */
.form-group1 {
margin-right: 8px;
}
@media only screen and (min-width: 575px) {
.form-container {
display: flex;
justify-content: center;
}

form {
flex: 1;
max-width: 575px;
}
}