我正在建立一个网站的形式与短信选择，我试图让两个字段堆叠时，在移动的，但仍然并排在桌面上使用显示：flex。我对web开发相对来说还是个新手，我已经尝试了所有我能想到的方法，包括使用display：块。
先谢了。
超文本：
<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="index.css" />
<title>Document</title>
</head>
<body>
<div>
<div>
<h2 id="top-text">NEVER MISS A DROP</h4>
<h4
id="explanation"
style="display: flex; align-items: center; justify-content: center"
>
FOR TEXT MESSAGE ALERTS & POTENTIAL EARLY ACCESS, SIGN UP BELOW
</h6>
</div>
<form id="form">
<div
style="display: flex; align-items: center; justify-content: center"
>
<select
style=" margin: 2px; width: 100%; height: 30px; display: flex; align-items: center; justify-content: center"
>
<option>(+1) United States</option>
<option>(+44) United Kingdom</option>
<option>(+52) Mexico</option>
<option>(+49) Germany</option>
<option>(+354) Iceland</option>
</select>
<input
style=" text-align: center; height: 25px; width: 100%; display: flex; align-items: center; justify-content: center"
id="phone-number"
name="phone-number"
placeholder="Please Enter Phone Number"
type="number"
/>
</div>
<div
style="display: flex; align-items: center; justify-content: center"
>
<button style="width: 300px; margin-top: 5px;" type="submit">CONFIRM SUBSCRIPTION</button>
</div>
</form>
<p id="disclaimer" style="font-size: x-small;" >* I consent to recieve recurring automated marketing by text message through an automatic telephone dialing system. Consent is not a condition to purchase. STOP to cancel, HELP for help. Message and Data rates apply. View Privacy Policy & ToS</p>
</div>
</body>
</html>CSS：
#top-text {
display: flex;
justify-content: center;
align-items: center;
font-family: Athletic;
}
#explanation {
font-family: Athletic;
font-style: italic;
}
@font-face {
font-family: Athletic;
src: url(Athletic.TTF);
}
#country-select {
display: flex;
justify-content: center;
align-items: center;
}
#phone-number {
display: flex;
justify-content: center;
align-items: center;
}
button {
display: flex;
align-items: center;
justify-content: center;
font-family: Athletic;
background-color: black;
color: white;
border: none;
height: 30px;
width: 170px;
}
button:hover {
background: #343a40;
}
@media screen and (max-width: 600px) {
.col-25,
.col-75,
input[type="submit"] {
width: 100%;
margin-top: 0;
}
}
/* #form {
display: flex;
justify-content: center;
align-items: center;
} */
/* #submit {
display: flex;
justify-content: center;
align-items: center;
} */
1条答案
按热度按时间1aaf6o9v1#
您可以向表单添加柔性 Package ，它会将项目移动到下一行。
具体方法如下：
希望这能帮上忙