如何将「Not got an Account?」提交按钮移至表单下方？CSS求助

我懂你的困扰——那个「Not got an Account?」按钮因为套在.box类里，继承了绝对定位的居中样式，所以不管怎么调都没法乖乖待在登录表单下面，还得保留原有登录框的样式对吧？咱们来一步步搞定它：

问题根源 #

你给注册按钮的<form>也用了.box类，而.box的CSS里设置了：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

这会让任何用了这个类的元素都直接居中在页面正中间，和登录框重叠或者并排，自然没法出现在下方。

解决方案（两种可选） #

方案1：快速修改——给注册按钮单独写样式 #

保留原有.box的登录表单样式，把注册按钮的<form>从.box类里剥离，单独设置样式让它在登录框下方：

修改后的CSS

* { box-sizing: border-box; }
html { background: #191919; }
body { 
  background: #191919; /* 修正原代码多写的逗号 */
  margin: 0; 
  padding: 0; 
  font-family: 'Lato', sans-serif; 
  text-align: center; 
  width: 100vw; /* 修正原代码漏写的冒号 */
  height: 100vh; /* 修正原代码漏写的冒号 */
}
.box { 
  width: 400px; 
  padding: 40px; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  background: #191919; 
  text-align: center; 
}
.box h1 { color: white; text-transform: uppercase; font-weight: 500; }
.box input[type="text"], .box input[type="password"], .box input[type="email"] { /* 修正原代码漏写的逗号 */
  border: 0; 
  background: none; 
  display: block; 
  margin: 20px auto; 
  text-align: center; 
  border: 2px solid #3498db; 
  padding: 14px 10px; 
  width: 200px; 
  outline: none; 
  color: white; 
  border-radius: 24px; 
  transition: 0.25s; 
}
.box input[type="text"]:focus, .box input[type="password"]:focus, .box input[type="email"]:focus { /* 修正原代码漏写的逗号 */
  width: 280px; 
  border-color: #2ecc71; 
}
.box input[type="submit"] { 
  border: 0; 
  background: none; 
  display: block; 
  margin: 20px auto; 
  text-align: center; 
  border: 2px solid #2ecc71; 
  padding: 14px 40px; 
  outline: none; 
  color: white; 
  border-radius: 24px; 
  transition: 0.25s; 
  cursor: pointer; 
}
.box input[type="submit"]:hover { background: #2ecc71; }

/* 新增注册按钮容器样式 */
.register-container {
  position: absolute;
  top: calc(50% + 280px); /* 50%是页面中间，加上登录框高度（可根据实际调整） */
  left: 50%;
  transform: translateX(-50%); /* 仅水平居中 */
}

/* 让注册按钮和登录按钮样式统一 */
.register-container input[type="submit"] {
  border: 0;
  background: none;
  border: 2px solid #2ecc71;
  padding: 14px 40px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}

.register-container input[type="submit"]:hover {
  background: #2ecc71;
}

修改后的HTML

<html>
<body>
<form class="box" action="login.php" method="post">
  <h1>Login</h1>
  <input type="text" name="u_email" placeholder="Email">
  <input type="password" name="u_pass" placeholder="Password">
  <input type="submit" name="u_btn" value="Login">
</form>
<form class="register-container" action="register.php" method="POST">
  <input type="submit" name="" value="Not got an Account?">
</form>
</body>
</html>

方案2：更健壮——用Flex布局统一控制 #

把登录表单和注册按钮放在一个父容器里，用Flex垂直排列，这样不管屏幕大小怎么变，两者都会保持相对位置，不需要固定数值：

修改后的CSS

* { box-sizing: border-box; }
html { background: #191919; }
body { 
  background: #191919;
  margin: 0; 
  padding: 0; 
  font-family: 'Lato', sans-serif; 
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 父容器，垂直排列两个表单 */
.auth-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 控制登录框和注册按钮的间距 */
}
.box { 
  width: 400px; 
  padding: 40px; 
  background: #191919; 
  text-align: center; 
}
.box h1 { color: white; text-transform: uppercase; font-weight: 500; }
.box input[type="text"], .box input[type="password"], .box input[type="email"] {
  border: 0; 
  background: none; 
  display: block; 
  margin: 20px auto; 
  text-align: center; 
  border: 2px solid #3498db; 
  padding: 14px 10px; 
  width: 200px; 
  outline: none; 
  color: white; 
  border-radius: 24px; 
  transition: 0.25s; 
}
.box input[type="text"]:focus, .box input[type="password"]:focus, .box input[type="email"]:focus {
  width: 280px; 
  border-color: #2ecc71; 
}
.box input[type="submit"] { 
  border: 0; 
  background: none; 
  display: block; 
  margin: 20px auto; 
  text-align: center; 
  border: 2px solid #2ecc71; 
  padding: 14px 40px; 
  outline: none; 
  color: white; 
  border-radius: 24px; 
  transition: 0.25s; 
  cursor: pointer; 
}
.box input[type="submit"]:hover { background: #2ecc71; }

/* 注册按钮样式 */
.register-container input[type="submit"] {
  border: 0;
  background: none;
  border: 2px solid #2ecc71;
  padding: 14px 40px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}

.register-container input[type="submit"]:hover {
  background: #2ecc71;
}

修改后的HTML

<html>
<body>
<div class="auth-wrapper">
  <form class="box" action="login.php" method="post">
    <h1>Login</h1>
    <input type="text" name="u_email" placeholder="Email">
    <input type="password" name="u_pass" placeholder="Password">
    <input type="submit" name="u_btn" value="Login">
  </form>
  <form class="register-container" action="register.php" method="POST">
    <input type="submit" name="" value="Not got an Account?">
  </form>
</div>
</body>
</html>

额外说明 #

我还帮你修正了原CSS里的几个小错误：

• body里的background属性多写了一个逗号
• width和height属性漏写了冒号
• 输入框选择器里漏写了逗号，导致样式无法应用到邮箱输入框

内容的提问来源于stack exchange，提问作者Anthillion