所以我正在努力创建这个非常简单的网站，但我一直面临的问题是，当我将东西放在一个 div 中时，我无法使它们适合容器，并且当我缩放时它们会保持垂直，例如:
这是 html:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<a href="signup.html"><i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i></a>
</fieldset>
</div>
这是我的 Css:
.Form{
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 50%;
white-space: nowrap;
padding:0;
}
.Member {
width: 40%;
}
.Not_member {
width: 50%;
text-align: center;
}
fieldset {
margin:0;
float: left;
}
我想做的是:
使每个容器在垂直和水平方向上都适合容器的一半
让它们保持水平并随容器一起收缩，所以我的意思是当窗口变小时它们会变成垂直的，我该如何阻止呢？
编辑:我想要这样:https://i.imgur.com/j27PQq4.jpg ，我希望它不再像这样下降:https://i.imgur.com/DPwTwkD.jpg
提前致谢
最佳答案
只要您的“不是成员(member)？”在它自己的 div 里面，你可以使用:
width: 100%;
和/或
height: 100%;
关于html - 如何使字段集(或任何其他类似元素)适合其容器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46716042/