我有一个登录和注册按钮，它们的形式不同，因为登录输入将使用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;
}
最佳答案
我将您的代码移至JSFiddle：https://jsfiddle.net/d0ugac8n/
如果登录表单中仅包含“按钮”，则可以执行以下操作：
form[action*="login"] {
display: contents;
}
这基本上意味着“忽略表单本身，仅显示子元素”。
警告词
display: contents当前不受高度支持（IE，当然是Edge）。如果您需要更好的浏览器支持，则可以通过form[action*="login"] {
display: inline;
}