Question

所以我正在努力创建这个非常简单的网站，但问题是我把它放在一个元素中，我不能让它们适合他们的位置，例如：

.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;
}

<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>

我想做的是：

使每个容器垂直和水平地适合容器的一半
让它们保持水平并随容器缩小，所以我的意思是当窗口变小时它们会变成垂直的，我该怎么办呢？

提前致谢

Answer 1

＆＃13;

.Form {
  border: 2px solid black;
  background-color: white;
  margin: 1px;
  float: left;
  width: 100%;
  white-space: nowrap;
  padding: 0;
}

form{
   width:55%;
}

.Member{
   width:40%;
}

.Not_member {
  width: 45%;
  text-align: center;
  padding:0;
  margin:0;  
}

fieldset {
  margin: 0;
  float: left;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: