我有一个不同形式的登录和注册按钮，因为登录输入将使用 post 方法，而注册输入将使用 get 方法。当前结果是这样的:https://imgur.com/PRuW0L1
我似乎无法找到一种方法在不更改表单当前布局的情况下将 2 个按钮彼此 float ，我希望它看起来像这样: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;
}
关于html - 我如何将这两个按钮以不同的形式并排放置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52951922/