Question

所以我正在努力创建这个非常简单的网站，但是我一直面临的问题是，当我把一个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&nbsp;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

提前致谢

Answer 1

只要你的“不是会员？”在它自己的div里面，你可以使用：

 width: 100%;

和/或

 height: 100%;

如何使字段集（或任何其他类似的元素）适合他们的容器？

1 个答案: