html - 一种形式内另一种形式变得不可点击

Question

我想要一个具有两种形式的 html 页面，一种用于登录，位于页面的中心（水平和垂直），另一种位于右上角的注册表单。

我将两种形式分成两个单独的 div 以应用样式。

问题是注册表单在其输入标签中变得不可点击。

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}

.login-form {
  width: 300px;
  margin: 0 auto;
  font-family: Tahoma, Geneva, sans-serif;
}

.login-form h1 {
  color: #4d4d4d;
  font-size: 24px;
  text-align: center;
}

.login-form input[type="password"],
.login-form input[type="text"] {
  width: 100%;
  padding: 15px;
  border: 1px solid #dddddd;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.login-form input[type="submit"] {
  width: 100%;
  padding: 15px;
  color: white;
  background-color: #535b63;
  border: none;
  font-weight: bold;
  box-sizing: border-box;
  cursor: pointer;
}

.signup-form {
  width: 200px;
  float: right;
  margin-right: 20px;
  font-family: Tahoma, Geneva, sans-serif;
}

.signup-form h1 {
  color: #4d4d4d;
  font-size: 24px;
  text-align: center;
}

.signup-form input[type="password"],
.signup-form input[type="text"],
.signup-form input[type="email"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #dddddd;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.signup-form input[type="submit"] {
  width: 100%;
  padding: 10px;
  color: white;
  background-color: #535b63;
  border: none;
  font-weight: bold;
  box-sizing: border-box;
  cursor: pointer;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <div class="login-form">
        <h1>Login Form</h1>

        <form action="/auth" method="POST">
          <input type="text" id="username" name="username" placeholder="Username" required>
          <input type="password" id="password" name="password" placeholder="Password" required>
          <input type="submit" value="Login">
        </form>
      </div>
    </div>
  </div>
</div>

<div class="signup-form">
  <h1>Signup Form</h1>

  <form action="" method="POST">
    <input type="text" id="username" name="usernames" placeholder="Username" required>
    <input type="email" id="email" name="email" placeholder="Email" required>
    <input type="password" id="passwords" name="passwords" placeholder="Password" required>
    <input type="password" id="passwords" name="passwords" placeholder="Repeat Password" required>
    <input type="submit" value="Sign Up">
  </form>
</div>

为什么注册表单变得无法点击？

PD：我使用外部、中间和内部 div 将 Log in 表单垂直和水平居中。

编辑：我使用了来自https://codeshack.io/basic-login-system-nodejs-express-mysql/的基本代码

标签： htmlcssforms

Answer 1

因为.outer“覆盖”它。如果您只想将登录表单居中（并在右侧粘贴注册），请使用flex.

请注意，在小屏幕中，注册表单与登录表单重叠，因此您可能需要在某个分辨率点进行不同的设计。

body {
  margin: 0;
}

.app {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form {
  width: 300px;
  margin: 0 auto;
  font-family: Tahoma, Geneva, sans-serif;
}

.login-form h1 {
  color: #4d4d4d;
  font-size: 24px;
  text-align: center;
}

.login-form input[type="password"],
.login-form input[type="text"] {
  width: 100%;
  padding: 15px;
  border: 1px solid #dddddd;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.login-form input[type="submit"] {
  width: 100%;
  padding: 15px;
  color: white;
  background-color: #535b63;
  border: none;
  font-weight: bold;
  box-sizing: border-box;
  cursor: pointer;
}

.signup-form {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  margin-right: 20px;
  font-family: Tahoma, Geneva, sans-serif;
}

.signup-form h1 {
  color: #4d4d4d;
  font-size: 24px;
  text-align: center;
}

.signup-form input[type="password"],
.signup-form input[type="text"],
.signup-form input[type="email"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #dddddd;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.signup-form input[type="submit"] {
  width: 100%;
  padding: 10px;
  color: white;
  background-color: #535b63;
  border: none;
  font-weight: bold;
  box-sizing: border-box;
  cursor: pointer;
}

<div class="app">
  <div class="login-form">
    <h1>Login Form</h1>

    <form action="/auth" method="POST">
      <input type="text" id="username" name="username" placeholder="Username" required>
      <input type="password" id="password" name="password" placeholder="Password" required>
      <input type="submit" value="Login">
    </form>
  </div>

  <div class="signup-form">
    <h1>Signup Form</h1>

    <form action="" method="POST">
      <input type="text" id="username" name="usernames" placeholder="Username" required>
      <input type="email" id="email" name="email" placeholder="Email" required>
      <input type="password" id="passwords" name="passwords" placeholder="Password" required>
      <input type="password" id="passwords" name="passwords" placeholder="Repeat Password" required>
      <input type="submit" value="Sign Up">
    </form>
  </div>
</div>