【发布时间】：2021-03-10 20:14:59
【问题描述】：
我正在尝试创建一个 html 表单，当屏幕宽度达到 x 像素数量时（使用 flexbox 和媒体查询），它将更改为列布局。我遇到的问题是提交按钮不会将自己定位在不同的字段下，例如姓名、您出生的城镇、全屏电子邮件，但会在手机大小的屏幕中。
我尝试将表单按钮div 放在联系人div 的内部和外部。只有当我将其留在联系人div 中时，我才能获得以移动格式显示在消息框下方的按钮。然后当我把它拿出来联系div它适用于移动设备但不能全屏。
我在下面包含的前两张图片是我希望全屏和移动设备的外观（请排除其他元素的响应性，这是一项正在进行的工作）。最后两张图是我现在的状态。
最后，我包含了表单的 HTML 和 CSS 代码。我还包括了主要的 CSS 样式表，以防其中有一些东西可能会影响我的表单。按钮/按钮 div 的代码可能看起来很简单，我尝试了许多不同的 flexbox 属性，但没有一个有效，所以我删除了它们以避免不必要的混乱。
Full Screen CorrectSmall Screen CorrectFull Screen IncorrectSmall Screen Incorrect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="formStyle.css" />
<title>Contact Us</title>
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" id="logo" />
<!--Logo-->
<nav>
<ul class="nav_links">
<li><a href="./index.html">Home</a></li>
<li><a href="./merchandise.html">Merchandise</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./contactUs.html">Contact Us</a></li>
</ul>
</nav>
</header>
<h1>CONTACT US</h1>
<br /><br />
<h4>
Have a quick question? Use contact form below and we'll be back to you as
soon as possible!
</h4>
<br />
<form action="#" class="contactForm">
<div class="message">
<label for="msg">Message</label>
<textarea id="msg"></textarea>
</div>
<div class="contact">
<label for="name">Name</label>
<input type="text" id="name" />
<label for="townborn">Town you were born in</label>
<input type="text" id="townborn" />
<label for="email">Email Address</label>
<input type="email" id="email" />
</div>
<div class="form-button">
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
.contactForm {
display: flex;
background-color: beige;
border-radius: 3px;
padding: 1.8em;
}
.message {
display: flex;
flex-direction: column;
order: 3;
}
.message > textarea {
flex: 1;
min-width: 18em;
}
.contact {
flex: 1;
order: 1;
margin-right: 2em;
}
.contact input {
width: 100%;
}
.contact input {
padding: 1em;
margin-bottom: 1em;
}
@media only screen and (max-device-width: 480px) {
.contactForm {
flex-direction: column;
}
.message {
margin-right: 2em;
order: 2;
}
.form-button {
order: 3;
}
}
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
background-repeat: no-repeat;
height: 100vh;
}
header {
display: flex;
padding: 10px 5%;
background-color: #ddf2eb;
align-items: center;
align-self: stretch;
}
#logo {
height: 70px;
width: 70px;
cursor: pointer;
}
.nav_links {
list-style: none;
margin-left: 10%;
white-space: nowrap;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0;
font-family: "Montserrat", "sans-serif";
font-weight: 500;
font-size: 15px;
color: #606d5d;
text-decoration: none;
}
.nav_links li a:hover {
color: honeydew;
}
.flex-container {
display: flex;
}
【问题讨论】：