时间戳

首页 > 解决方案 > 我如何将这 2 个按钮以不同的形式并排放置

html - 我如何将这 2 个按钮以不同的形式并排放置

问题描述

我有一个不同形式的登录和注册按钮，因为登录输入将使用 post 方法，而注册输入将使用 get 方法。目前的结果是这样的：https ://imgur.com/PRuW0L1

我似乎无法找到一种在不更改表单当前布局的情况下将 2 个按钮浮动的方法，我希望它看起来像这样：https ://imgur.com/mV4pFwt

这是我的代码：

HTML：

<body>
  <div align="center" class="half">
    <h1>Login</h1>
    <form method="post" action="login">
      Username:
      <input type="text" name="username"> 
      <br>
      <br>
      Password:
      <input type="password" name="password">
      <br>
      <br>
      <div class="g-recaptcha" data-sitekey="6LdaVHYUAAAAAIxBlaPMTaE0Cuwhb5SK5Q10JKt1"></div>
      <br>
      <input type="submit" value="Login">
    </form>
    <form action="login" >
      <input type="submit" value="Register">
    </form>
    <br>
    <a href="./recover.html">Forgot your password?</a>
  </div>
</body>

CSS：

.half{
    vertical-align: middle;
}

标签： htmlcss

解决方案

我希望这有帮助！这是一种相当老套的方式，我注意到在放大“忘记密码”时会慢慢偏离中心。如果你想帮助保持它的位置，我可以更多地玩它，否则，祝你好运:)

HTML：

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="styles.css"> 

<script src='https://www.google.com/recaptcha/api.js'></script>

<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<div align="center" class="half">
<h1>Login</h1>
<form method="post" action="login">
Username:
<input type="text" name="username"> <br><br>
Password:
<input type="password" name="password"><br><br>
<div class="g-recaptcha" data-sitekey="6LdaVHYUAAAAAIxBlaPMTaE0Cuwhb5SK5Q10JKt1"></div>
<br><input class="logreg" id="login" type="submit" value="Login">
</form>

<form action="login" >
<input class="logreg" id="register" type="submit" value="Register">
</form>
<br><br>
<a href="./recover.html">Forgot your password?</a>
</div>

</body>
</html>

CSS：

.half{
    vertical-align: middle;
}

.logreg
{
    float: left;
}

#login
{
    margin-left: 46%;
    margin-right: 10px;
}

a
{
    margin-left: 1%;
}

推荐阅读