Question

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

我似乎无法找到一种方法来使两个按钮彼此浮动而不改变表单的当前布局，我希望它看起来像这样：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;
}

Answer 1

当您不想更改布局时，这很讨厌，但是您可以像这样放置其他表单：

form + form {
  display: inline-block;
  transform:translate(100%,-100%);
}

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

Answer 2

我将您的代码移至JSFiddle：https://jsfiddle.net/d0ugac8n/

如果登录表单中仅包含“按钮”，则可以执行以下操作：

form[action*="login"] {
    display: contents;
}

这基本上意味着“忽略表单本身，仅显示子元素”。

警告语 display: contents当前不受高度支持（IE，当然是Edge）。如果您需要更好的浏览器支持，则可以使用

form[action*="login"] {
    display: inline;
}

Answer 3

我希望这会有所帮助！这是一种很hacky的方式，我注意到放大“忘记密码”后逐渐偏离中心。如果您需要帮助以保持它的位置，我可以再加上它，否则，祝您好运：）

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

Answer 4

只需删除另一个表单，然后将Register按钮放在另一个表单内，然后在两个按钮中添加display: inline block类或其他内容即可。

代码如下：

.half {
  vertical-align: middle;
}

input {
  display: inline-block;
}

<script src="https://www.google.com/recaptcha/api.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">

<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 type="submit" value="Login">
      <input type="submit" value="Register">
    </form>
    <br>
    <a href="./recover.html">Forgot your password?</a>
  </div>

</body>

Answer 5

我的按钮ID是NewSession，它是在表单之后定义的，即它在表单外部，但是我希望它恰好在表单输入类型Submit的侧面，所以我做到了……有效！

#NewSession{
margin-top: -40px;
float: right;
margin-right: 510px;
}

您需要调整边距，但这是一种反复试验的方法...

如何将这两个按钮以不同的形式并排放置

5 个答案: