gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 22:22:30 25 4
gpt4 key购买 nike

我有一个不同形式的登录和注册按钮,因为登录输入将使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com