我正在尝试创建一个登录表单，其中我想要复选框“记住我”和链接“密码？” 彼此紧挨着，在当前情况下，它们是彼此下面的:
代码:
null
.form-group {
display: block !important;
margin: 0 auto !important;
max-width: 75% !important;
margin-bottom: 5% !important;
} <div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
@Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
<p>
<a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
</p>
</div>
null
我怎样才能做到这一点呢？
谢谢
请使用内联块。 在这之后，使用填充中间两个。
因为你多次使用！重要，所以我在下面的类上也添加了它。
.d-inline-block {
display: inline-block !important;
}
<div class="form-group">
<div class="checkbox d-inline-block">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
@Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
<div class="d-inline-block">
<a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
</div>
</div>
尝试在“form-group”类选择中将“display:block”更改为“display:flex”
默认情况下，div和paragraph元素是块元素。
为了使这些元素紧挨着呈现，您需要确保将div class=“checkbox”设置为备选项-我建议使用display:inline-block；。
您可以清理标记，从表单中完全删除标记，只保留超链接。 查看下面的片段。
null
.form-group {
display: block !important;
margin: 0 auto !important;
max-width: 75% !important;
margin-bottom: 5% !important;
}<div class="form-group">
<div class="checkbox" style="display:inline-block">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
@Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
<a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
</div>